JavascriptでHTML内の特定のテキストにリンクを追加する方法
- Javascriptを使用して、HTML内にある特定のテキストにリンク（<a>タグ）を追加する方法をご説明します。
- 例えば、<div class="contents">内のテキストにリンクを追加する場合、<a>タグを使用して該当するテキストをリンクに変換することができます。
- リンクを追加したいテキストに対して、<a href="URL" target="_blank">リンクテキスト</a>という形式のHTMLコードを生成し、innerHTMLプロパティを使用して該当するテキストを置換することで実現します。
- ベストアンサー
特定のテキストにリンク
特定のテキストにリンク 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）の中の、この単語（テキスト）といった指定ができると良いです。 よろしくお願い致します。
- ikehata_shin
- お礼率54% (39/72)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
わかりやすいのは、 要素.innerHTML = 要素.innerHTML.replace(/都庁/g,'<a href="http://www.metro.tokyo.jp/" target="_blank">都庁</a>') とかですかね。ただし、innerHTMLは標準じゃないので一部のブラウザでは動きません。IEとFirefoxで動くから大部分の人は大丈夫でしょう。
その他の回答 (1)
- think49
- ベストアンサー率59% (285/482)
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
お礼
ありがとうございました。
関連するQ&A
- テキストリンクの色を徐々に濃くしたいのですが
初心者の質問です。 リンクページを作っています。 ページが読まれたら、このテキストリンク色をそれぞれ透明から白100％に徐々に濃くしたいのです。（バックが黒です） （要するにテキストがフェードインする感じにしたいです。） マウスオーバーしたら、とかのサンプルはありますが、ページが開いた時にテキストリンク色が変わるようなものは見当たりませんでした。 どのブラウザでもある程度見れるもので（あまり古いバージョンは仕方ないです）よいスクリプトありますでしょうか。 どなたかご助言いただけたら助かります。 <html> <body> <div id="content"> <div id="link"> <div id="link1">○○○サイト <p><a href="a.html">● A site</a></p></div> <div id="link2">△△△サイト <p><a href="b.html">● B site</a></p></div> <div id="link3">その他<p><a href="c.html">● C site</a></p></div> </div> </div> </body> </html> よろしくお願いいたします。
- ベストアンサー
- JavaScript
- テキストリンクとテキストで、高さが違ってしまいます。これを直したいのですが…
左側のテキストリンクは左上に、右側のテキストは右上に表示させたいのですが、FｘとIEで高さがずれてしまいます。どちらのブラウザでもIEのように高さが合うようにしたいのですが… 以下、ソースです ---------------------------------------- HTML <div id="footer"> <a href="index.html">左端に揃えたい</a> <p>右端に揃えたい</p> </div> CSS #footer a { float: left; } #footer p { float: right; } ---------------------------------------- 素人質問で申し訳ありません。いろいろ考えた結果、左側はリンクで、右側がテキストだから高さが合わないのではないかと思っているのですが、対策が取れませんでした。
- ベストアンサー
- HTML
- <ul>〜</ul> 内に普通のテキストを書くことはできません。と診断されます
Another HTML-lint gateway「http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html」にてHTML文法チェックを行ったところ以下のような診断をされました。 <ul>〜</ul> 内に普通のテキストを書くことはできません。（重要度9） なぜこういう診断がされてしまうのか原因がわかりません。 専門のサイトなどで<li>や<ul>について確認しましたが特に問題のある箇所が自分では特定出来ませんでした。 診断されたHTMLコード（抜粋）は以下になります。 <div id="sidebar"> <div id="sidebar_top"> <div id="sidebar_contents"> <p> </p> <p><img src="navigator.png" alt="" width="93" height="18" vspace="5" /></p> <h3>Categories : </h3> <div class="nav"> <ul> <li><a href="top">TOP</a></li> </ul> <h3>コンテンツ</h3> <ul> <li><a href="01">コンテンツ(1)</a></li> <li><a href="02">コンテンツ(2)</a></li> <li><a href="03">コンテンツ(3)</a></li> <li><a href="04">コンテンツ(4)</a></li> <li><a href="05">コンテンツ(5)</a></li> </ul> </div> </div></div></div> ※XHTML1.0 Transitional、UTF-8 これでは情報足りないようでしたら仰って下さい。 何卒、よろしくお願い致します。
- ベストアンサー
- HTML
- アコーディンパネルの別ページからのリンクについて
こんばんは。 jqueryを使ってアコーディオンパネルを実装したページを作成しました。 通常は全て閉じた状態ですが、 全てのページにパネル１～5へのリンクがあり、それをクリックすると該当のパネルが開いた状態で表示させるには、どんなスクリプトを追加するとよろしいのでしょうか？ 以下コードです。 --html（各ページのリンクの部分） <ul> <li><a href="/service/#panel01">パネル１へ</a></li> <li><a href="/service/#panel02">パネル２へ</a></li> ・・・ </ul> --html（アコーディオンパネルの部分 /service/index.html ） <h5 class="trigger" id="panel01"><a href="#">パネル1のタイトル</a></h5> <div class="accblock"> <p>パネル１のコンテンツ</p> </div> <h5 class="trigger" id="panel02"><a href="#">パネル2のタイトル</a></h5> <div class="accblock"> <p>パネル2のコンテンツ</p> </div> （省略） ---js $(document).ready(function(){ $(".accblock").hide(); $("h5.trigger").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); }); }); location href か hash を使うのかなと思っているのですが うまく使いこなすことができませんでした。 アドバイスをいただけたら助かります。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- マーキーにリンクをはりたいがdocomoで動かなくなる？
モバイルサイトで、マーキー（移動テキスト）にリンクをはりたいと思っています。 ですがdocomoで見ると（F700iと古い機種ですが…）ただのテキストリンクになり、移動しません。 au、ソフトバンクは問題ありませんでした。 モバイルサイトはhtmlと、xhtmlで作っています（事情があってページごとに違います） 以下試してみたものです。（結果docomoで動きませんでした） ■１ <div style="display:-wap-marquee;"> <a href="http://xxx.jp/">マーキーにリンクはれる？</a> </div> ■２ <marquee> <a href="http://xxx.jp/">マーキーにリンクはれる？</a> </marquee> ■３ <a href="http://xxx.jp/"><div style="display:-wap-marquee;">マーキーにリンクはれる？</div></a> ■４ <a href="http://xxx.jp/"><marquee>マーキーにリンクはれる？</marquee></a> なにか方法はあるのでしょうか？ それともdocomoはこういうものなのでしょうか？？
- ベストアンサー
- その他([技術者向] コンピューター)
- Jqueryで特定のa要素を持つ親要素の取得について
Jqueryで特定のa要素を持つ親要素の取得について <div id="shop"> <p><a href="http://www.aaaa.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.bbbb.jp">お店の名前</a></p> <p>あああああああああ</p> </div> ここから、『http://www.bbbb.jp』のリンクを持つdivを指定するとして・・・ $('a[href*="http://www.bbbb.jp"]').parent().parent().css("background-color","#ccc"); こんな風に書きました。 これでもOKなんですけど、『.parent().parent()』親の親って・・・(汗) もう少しよい親子関係の指定があれば、ぜひ教えていただきたいです！
- 締切済み
- JavaScript
- JavaScriptを使ってアンカーリンクでテキストを変更したい。
JavaScriptを使ってアンカーリンクでテキストを変更したい。 JavaScriptを使ってアンカーリンクでテキストを変更したいのですがうまくいかず困っています。 A B C <div class="A"> ○○○○○ ○○○○○ ← A群 ○○○○○ </div> Bのアンカーリンクを押したら A B C <div class="B"> □□□□□ □□□□□ ← B群 □□□□□ </div> Cのアンカーリンクを押したら A B C <div class="C"> △△△△△ △△△△△ ← C群 △△△△△ </div> というように同じページ内の同じ場所にcssのdisplay（none⇔block）で表示を入れ替えるようなスクリプトが書きたいのですがわかりません。 参考URLだけでもいいので宜しくお願いいたします。
- ベストアンサー
- JavaScript
- Jquery 特定のa要素を持つ親を２つに分けてランダムに順番入れ替え
Jquery 特定のa要素を持つ親を２つに分けてランダムに順番入れ替え 立て続けに何度も質問して申し訳ありません。いろんな方に質問して、答えていただき、 【HTML】 <div id="shop"> <p><a href="http://www.aaaa.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.bbbb.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.cccc.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.dddd.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.eeee.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.ffff.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.gggg.jp">お店の名前</a></p> <p>あああああああああ</p> </div> 【Jquery】 $(function(){ var shopA = $('a[href*="http://www.aaaa.jp"]').parent().parent().css("background-color","#CCC"); var shopC = $('a[href*="http://www.cccc.jp"]').parent().parent().css("background-color","#666"); shopA.after(shopC); }); 特定のURLを持つ親のdivの順番を入れ替えることに成功しました。が、 さらにこの特定のa要素を持つdivをリロードごとにランダムで順番を切り替えるにはどうすればいいのでしょうか？？ さらに、特定のURLを持たない、つまりそれ以外のURLを持つ親要素もランダムで順番を切り替えたいのです。 つまり、上と下で２つに分けたランダムが動いているようにしたいのです。 有料と無料で振り分けて、有料を上でランダム、その下で無料の登録URLがランダムにしたいんだとか・・・。 すみません、もし分かるかた、教えていただけたら助かります！！
- 締切済み
- JavaScript
- 初歩的かもしれませんが回り込みが上手くできません
初歩的かもしれませんが回り込みが上手くできません イメージ的には、図のようなdivを４つ横に並べて改行、同じように繰り返したいです。 ■■■■ ■■■■ しかし、下記の様にすれば ■■■ ■ ■■■ ■ に、なってしまいます。 こういう場合、どうすればいいのでしょうか？？ <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave1</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave2</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave3</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave4</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave5</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave6</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave7</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave8</a></div>
- ベストアンサー
- CSS
お礼
ありがとうございました。