Q&A
ありがとうございます！
例外処理を想像できるほどjsにまだ詳しくないため、一旦はhtmlの書き方について、対応しようと思います。
WEBサイトを作成しており、その一部の機能で文章中にある特定のキーワードを自動的にハイパーリンクにしたいと思ってます。（ウィキペディアのようなイメージ）
下記①のサイトを参考にし、コピペで自動でハイパーリンク化にできましたが、
先頭の該当するキーワードのみにしか反映できませんでした。
①https://ascii.jp/elem/000/000/200/200581/
■現在の状態⇩
全体に反映させるために、①サイト内に
単語が多くなったときにリンクだらけになってしまうのを避けるため、今回はグローバルマッチ（文章全体）の置換処理はせず、最初に見つかったものだけをリンクにしています。もちろん、これまでと同様にgオプションを付加して全体を置換しても問題ありません。
とあったため、下記②のサイトの引用部分のことかと思い試してみましたが反映しませんでした。
②https://ascii.jp/elem/000/000/200/200144/2/
最初のパラメータで「/未曾有/g」と指定していますが、パラメータには単純な文字列ではなく正規表現で使用できる文字列を指定します。今回は特殊な文字がないので、「/」と「/」の間に置換元になる文字列を指定するだけです。「/」の後にある「g」はグローバルマッチ (global match) で、指定すると文章全体にある該当文字が対象になります。ふりがなをつけるのは文章中の最初の1回だけでいい、という場合はgを外せばOKです。
また、①のサイトに下記ような記載があったのですが、
こちらも対応方法の一つかと思ったのですが、内容が理解できずにどのようにしたらいいのかわからない状況です。
また、repace()の最初のパラメータは「/～/」でなく「new RegExp()」とします。変数などを使用する場合には、「RegExp()」の最初のパラメータに置換（検索）文字を指定し、2番目のパラメータで"g"や"i"などオプションパラメータを指定します。2番目のパラメータは今回省略していますので、グローバルマッチは行なわれず、最初に見つかった単語だけにリンクを追加します。
どのようにしたら文章中にある特定のキーワード全てに自動的にハイパーリンク化できるかご教示お願いいたします。
下記現在のコードになります。
■html
<html> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script> <script type="text/javascript" src="t1.js"> </script> <script type="text/javascript"> $(function () { $("body").addlink(); }); </script> <title>test</title> </head> <body> <h1 id="sampleDoc">テスト、試験、test</h1> <h3 id="sampleDoc">テスト、試験、test</h3> <p id="sampleDoc">テスト、試験、test</p> <a id="sampleDoc">テスト、試験、test</a> <div id="sampleDoc">テスト、試験、test</div> </body> </html>
■javascript
$.fn.addlink = function(baseURL){ var dict = [ "テスト", "http://ja.wikipedia.org/wiki/富士山", "試験","http://ja.wikipedia.org/wiki/京都市", "test","http://ja.wikipedia.org/wiki/秋葉原" ]; return this.each(function(){ var srcText = this.innerHTML; for (var i=0; i<dict.length; i+=2){ srcText = srcText.replace(new RegExp(dict[i]),"<a href='"+dict[i+1]+"'>"+dict[i]+"</a>"); } this.innerHTML = srcText; }); }
何卒よろしくお願いいたします。
回答3件
0
ベストアンサー
こんばんは。
new RegExp(dict[i],"g")としてみてはどうでしょうか？
老婆心ながらアドバイスさせていただくと、この方法は、たとえば<a href="test.html">test.html</a>を<a href="<a href="http://ja.wikipedia.org/wiki/秋葉原">test</a>.html"><a href="http://ja.wikipedia.org/wiki/秋葉原">test</a>.html</a>と書き換えるはずなので、お気を付けください。
投稿2020/09/02 16:09
編集2020/09/02 16:15
総合スコア36087
0
すべてのHTML要素に対して、直下にあるテキストノードを検索して変更する必要があります
ただしアンカー中のテキストを更にアンカーを貼ることはありえないので
例外処理を検討してください
投稿2020/09/03 03:21
総合スコア114814
0
ウィキペディアのようなイメージ
他のWikiの例（Perl製 FreeStyle Wiki）
WikiParser で実装される自動リンクは、Wiki記法のソースに対して処理します。
- 字句解析直前、Wiki記法のページリンク記法に置き換える
- HTMLへの変換処理でA要素に置き換える
dictの管理
正規表現による置き換え順がありますので、管理は重要になります。
- ソートしやすいデータ構造（連想配列代わりのobject、2次元配列、Map）にする。
- キーの文字列長が長い順に並び替える
javascript
1var dict = [ 2 ["テスト", "http://ja.wikipedia.org/wiki/富士山"], 3 ["試験","http://ja.wikipedia.org/wiki/京都市"], 4 ["試験結果","http://ja.wikipedia.org/wiki/奈良市"], 5 ["test","http://ja.wikipedia.org/wiki/秋葉原"] 6].sort( (a,b)=>b[0].length-a[0].length ); 7console.log(dict);
※試験結果 と 試験 は置換順によっては意図しない結果が考えられます
HTML文書を対象とする場合
置換対象となる字句は制限を受けそうです。
- 先祖にA要素がないテキストノードが置換対象
ご質問のHTMLで以下の部分は、置換後に a > a にならないように注意します。
html
1<a id="sampleDoc">テスト、試験、test</a>
グローバルマッチ
Lhankor_Mhy さんの回答どおり、g フラグで対応し、str.replace() を使うと良さそうに思います。
投稿2020/09/02 22:11
編集2020/09/02 22:26
総合スコア5432
ありがとうございます！
str.replace()を使うと良さそうとありますが、srcText.replace()とはまた別なんでしょうか？
また、srcTextの部分をすべてstrに変えても反応せず、
どのようにコード内に入れればよろしいでしょうか？
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/09/03 14:23