【JavaScript】URLを<a>タグで囲ってリンク貼る方法【正規表現】

[Ciel]

お世話になります。シエルです。

今、ツイッターＡＰＩを使ってつぶやきを取得し、
URLを正規表現でマッチさせ、そのURL部分を<a>タグで囲むことによって、リンクを貼ろうとしているのですが、
うまくいきません。

マッチさせる正規表現はできました。
↓です。これを使えばマッチすることは確認しています。

str=text.match(/https?:\/\/[a-z0-9A-Z\.\/\-~#&%\$!\?=]+/ig)

で、そのマッチした文字を使って、↓で、変換しています。
obj=new RegExp(str,"g");
text=text.replace(obj,"<a target='_blank' class='link' href='"+str+"'>"+str+"</a>");

こうすれば、text内に複数のURLが含まれている場合でも、gオプションを使っているので、そのURLに対して全て変換を行ってくれます。

ですが、上記のmatchでマッチした文字列の中に?などの正規表現で使う文字列が含まれていた場合、
変換を行ってくれません。
恐らく、メタ文字として見られているので、「？」という文字では見られていないからだと思われます。


↑こういうURLがダメになります。
そのほかのURLはこの方法でちゃんとリンクを貼ることができます。

今回はたまたま「？」の文字でしたが、他のメタ文字が含まれていた場合同様の現象が起こるとおもわれます。

何か良い方法はないでしょうか？

よろしくお願い致します。

[kimuchi]

javascriptにビルドイン関数のescape関数群があります。
これはいわゆるASCII形式（URL形式）に文字列を変換するもので、メタ文字を含まないものになります。
以下、資料です。

↓escape(), encodeURI(), encodeURIComponent() 比較
http://groundwalker.com/blog/2007/02/ja ... nent_.html
↓Ajax手引き
http://www.openspc2.org/JavaScript/Ajax ... index.html
↓正規表現を使ってメタ文字をエスケープ
http://subtech.g.hatena.ne.jp/cho45/20090513/1242199703

[kimuchi]

すみません。筆の勢いでうっかりメタ文字が全部変換されるみたいなこと書いてしまいましたが、
「*」と「.」はどう頑張っても変換できなさそうです．．．orz
幸い「.」は一回しか出てこないので良いですが、「*」は使わないようにしなければならないですね．．．

[Ciel]

kimuchiさん。ありがとうございます＾＾

ちょっとエスケープの意味が良く伝わっていなかったようなのですが、
「正規表現の中で」文字として、扱われる方法を探していたので、メタ文字を直接変換するという方法ではちょっとまずいのです。。。
私の言い方が悪かったですｗすいません＾＾；

で、ググリにググリを重ねて、良い方法が見つかりました。
replace関数でgオプションを利用すれば、マッチしたものに対して都度変換処理を行ってくれるようでして、
この関数だけでやりたいことが出来てしまいました。
参考にしたのは↓のサイト
http://d.hatena.ne.jp/mtoyoshi/20080422/1208858413

replace関数は（）でキャプチャしたものは、$変数で表せるようでして、キャプチャする数が増えるうちに$1,$2,$3・・・と表すことが出来るようになります。
で作ったのが↓です。
text.replace(/(https?:\/\/[a-z0-9A-Z\.\/\-~#&%\$!\?=]+)/ig,"<a target='_blank' class='link' href='"$1'>"$1"</a>");

URL部分を（）で囲ってキャプチャしています。これによって、マッチした部分は$1という変数で表すことができます。
マッチした部分といえば、URLが入っているはずなので、第二引数で$変数を利用し、設定するだけです。

gオプションをつけているので、text内に複数のURLが含まれていた場合でも、マッチする度に、第二引数の変換処理をマッチ部分に対して行ってくれるので、
すべてのURLにリンクを貼ることができるわけです。
マッチする度に処理してるので、$1には毎回マッチした新しいURLが入ります。

大雑把に説明するとこんな感じです。

わかりにくいかもしれませんが、参考になれば嬉しいです。

[kimuchi]

お力になれず、申し訳ないです。
良く読んで見るとメタ文字のマッチには成功されていましたね(~_~;)

後方参照の存在は忘れていました。
こういう場面で利用出来るのですね。毎度参考になります！