Javascriptによる置換で特定の単語をリンクテキストにしたいが、htmlタグのまま表示されてしまう

具体的には入力フォームに書いた文章の中で、「世界史の窓」というサイトの記事タイトルと同じ単語を自動的にリンクテキストにし、ワンクリックでサイトへ行けるようにしたいです。

例：ローマ帝国の範囲は全地中海世界に及び、イタリア半島以外の領土として属州を支配した。

→ローマ帝国の範囲は全地中海世界に及びイタリア半島以外の領土として属州を支配した。

現在私が試しているやり方は、すべての記事タイトルとリンクのhtmlタグの組み合わせを事前に設定して置換するという力技のものです。ですが、プログラミング初心者で見様見真似で行った結果、置換して出力されるのはhtmlタグのままの状態となってしまいました。

置換した結果がリンクテキストの状態で表示されるようにする方法、あるいはもっと力技でない効率的なやり方、アプローチ等ありましたらご教授いただけると幸いです。　よろしくお願いいたします。

<html>
<head>
<title>単語をリンクテキストに置換</title>
    <script language="JavaScript">
    <!--
    function replace() {
// テキストエリアの置換
textareas = document.getElementsByTagName('textarea');
for( var i = 0 ;i < textareas.length ;i ++ ){
    textareas[ i ].value = textareas[ i ].value.replace( /グーグル/g ,'<a href="https://www.google.com">グーグル</a>' );
}

    }
    //-->
    </script>
    </head>
<body>

<form name="form1">
    <h1 style="font-size:20px">単語をリンクテキストに置換</h1>
    <textarea name="text" rows="0" cols="10"></textarea><br>
    <br>
    <input type="button" onClick="replace()" value="置換">
</form>
</body>
</html>

kei344

2019/12/21 11:39

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。

行動規範の内容に同意します

回答2件

ベストアンサー

許可された内容テキストのみ

<textarea> - HTML: HyperText Markup Language | MDN

とあるように、textareaの中に要素（＝タグ）を入れることはできませんので、難しいかと思います。

一応、当方の環境では、

js
1    textareas[ i ].innerHTML = textareas[ i ].value.replace( /グーグル/g ,'<a href="https://www.google.com">グーグル</a>' );
2

とすれば、DOM的にはタグ付けがされているようですが、リンクとしてパースされていないようでした。

投稿2019/12/21 03:43

Lhankor_Mhy

総合スコア36115

Beginner3

2019/12/21 10:17

ありがとうございます。試行錯誤の末なんとかまともに動くものができました。

行動規範の内容に同意します

テキストボックスにリンクテキストは表示できないので、別の場所に表示させた結果出来た。

<html>
  <head>
        <meta charset="utf-8">
    <title>Sample</title>
  </head>
  <body>
  <textarea rows="8" cols="25"></textarea>
<button>クリック</button>
 
    <script>
 
      //ここにJavaScriptを記述する
    
    </script>
    
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
     jQuery(function(){
          
     });
     
     //ボタンをクリックしたら発動
$('button').click(function() {
 
  //テキストエリア内の文字列を変数に格納
  var txt = $('textarea').val();
 
 
 
 
  //変数内の文字列の改行コードを改行タグに変換し、ボタンの隣に出力
  $(this).after('<p>'+txt.replace(/人類/g, '<a href="https://www.y-history.net/appendix/wh0100-00.html">人類</a>')
.replace(/直立歩行/g, '<a href="https://www.y-history.net/appendix/wh0100-01.html">直立歩行</a>')
),);
 
});
     
     
  </script>
　　　　</body>
</html>

投稿2019/12/21 10:20

Beginner3

総合スコア14