特定のテキストにリンク

質問

特定のテキストにリンク

javascriptで、html内に出てくる特定のテキストに<a>をつけてリンクさせるには、どのようにすればよいでしょうか。

例えば、

<div class="contents">
<p>私は都庁に行きます。</p>
<p>私は上野にも行きます。</p>
</div>

とあったら、

<div class="contents">
<p>私は<a href="http://www.metro.tokyo.jp/" target="_blank">都庁</a>に行きます。</p>
<p>私は<a href="http://www.ueno.or.jp/">上野</a>にも行きます。</p>
</div>

といった感じです。

このclass（id）の中の、この単語（テキスト）といった指定ができると良いです。

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

回答No.1

notnot · ベストアンサー

わかりやすいのは、

要素.innerHTML = 要素.innerHTML.replace(/都庁/g,'<a href="http://www.metro.tokyo.jp/" target="_blank">都庁</a>')

とかですかね。ただし、innerHTMLは標準じゃないので一部のブラウザでは動きません。IEとFirefoxで動くから大部分の人は大丈夫でしょう。

お礼

ありがとうございました。

回答No.2

think49

innerHTML は元々IEの独自拡張でしたが、NNがなくなってから使用者が増えたので他のブラウザもサポートしています。
IE5.5+, Fx3.0+, Safari4.0+, GoogleChrome4+, Opera10.10+ で動作するので、互換性も概ねクリアできていると思います。

W3C DOM Compatibility - HTML
http://www.quirksmode.org/dom/w3c_html.html

現在では、HTML5 で標準化されました。

3.3 APIs in HTML documents ? HTML5 (including next generation additions still in development)
http://www.whatwg.org/specs/web-apps/current-work/multipage/apis-in-html-documents.html#innerhtml

ただし、innerHTML は低速な上に、IEの独自拡張にならって他のブラウザが実装した(元々は標準仕様ではなかった)ので、ブラウザ毎の仕様差が多い…。
個人的には innerHTML を使わなくても実装できるのなら使う必要はない、と思います。

- 通常のDOM操作よりも低速
- 要素名の大文字/小文字の認識が各々のブラウザで異なる (小文字 = Firefox, Goocle Chrome, Opera / 大文字 = IE)
- IE はホワイトスペースノードを無視する

DHTML Dude:更なるパフォーマンス向上のヒント
http://msdn.microsoft.com/ja-jp/library/bb263997%28VS.85%29.aspx

ちなみに、似たようなメソッドとして outerHTML がありますが、Firefox以外は対応しています。
IEは対応しているので、HTMLElement.prototype.outerHTML を定義すれば、ほとんどのブラウザで使えます。
http://d.hatena.ne.jp/amachang/20100531/1275270877

お礼

ありがとうございました。