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

HTML/CSS/JavaScriptを扱っている方の為のコミュニティです。

色んな疑問や質問を皆で解決していきましょう!

※最初はjQuery限定のコミュでしたが、jQueryはJavaScriptのライブラリであり、
また、HTML/CSSも深く関わってくるので全部一つのコミュにまとめました。
フォーラム(掲示板)ルール
一般常識さえ守れば、どんなスレでも立てていただいて構いません。

常識外れの投稿やスレを見つけた場合は、私の判断で削除いたします。

スレ立てるまでもない、簡単な質問は、
「スレ立てるまでもない質問」のスレッドに投稿して下さい。

基本的には、一つの質問につき1つのスレッドを立てていただて構いません^^
返信
アバター
Ciel
記事: 252
登録日時: 8年前

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

#1

投稿記事 by Ciel » 8年前

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

今、ツイッターAPIを使ってつぶやきを取得し、
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はこの方法でちゃんとリンクを貼ることができます。

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

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

よろしくお願い致します。
oui C'est la Vie♪

アバター
kimuchi
記事: 163
登録日時: 8年前
住所: 東京

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

#2

投稿記事 by kimuchi » 8年前

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
記事: 163
登録日時: 8年前
住所: 東京

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

#3

投稿記事 by kimuchi » 8年前

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

アバター
Ciel
記事: 252
登録日時: 8年前

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

#4

投稿記事 by Ciel » 8年前

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

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

で、ググリにググリを重ねて、良い方法が見つかりました。
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が入ります。

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

わかりにくいかもしれませんが、参考になれば嬉しいです。
oui C'est la Vie♪

アバター
kimuchi
記事: 163
登録日時: 8年前
住所: 東京

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

#5

投稿記事 by kimuchi » 8年前

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

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

返信

“HTML/CSS/JavaScript” へ戻る