HTMLタグが文字列として表示されてしまう

ページ内にある電話番号にだけリンクをつけたいです。

JavaScriptの処理方法が悪いと思うのですが、
HTMLタグが文字列として表示されてしまいます。
（添付画像参照）

これをHTMLタグとして認識させることはできないでしょうか？

（この処理を実装しようとしている背景は、過去の自分の質問を参照）
https://teratail.com/questions/343751
https://teratail.com/questions/343596

html
1<body>
2  <div class="wrapper">
3    <p>000-5623-0000</p>
4    <div>
5      <p>電話番号は000-1166-0000</p>
6      <p class="test">&lt;p&gt;000-0000-0000&lt;/p&gt;</p>
7      <p>000-0000-0000</p>
8    </div>
9    <form action="">
10      <input type="text" value="000-5555-5555">
11      <select name="" id="">
12        <option value="">000-9999-9999</option>
13      </select>
14    </form>
15    <p>
16      あいうえお000-0000-6980
17      000-0000-6980
18      000-0000-6980かきくけこ
19      <span>
20        000-0000-0000
21        <a href="#">000-0000-0000</a>
22        <span>
23          000-0000-0000
24        </span>
25      </span>
26    </p>
27    <a href="">test000-0000-0000</a>
28    <p>000-0000-0000</p>
29  </div>
30  <script src="https://code.jquery.com/jquery-2.2.4.min.js"
31    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
32  <script src="a-text.js"></script>
33  <!-- <script src="class.js"></script> -->
34  <!-- <script src="fragment.js"></script> -->
35</body>

javascript
1const nodeIterator = document.createNodeIterator(
2  document.body,
3  NodeFilter.SHOW_TEXT,
4  function (node) {
5    return /\d{3}-\d{4}-\d{4}/g.test(node.nodeValue) ?
6      NodeFilter.FILTER_ACCEPT :
7      NodeFilter.FILTER_REJECT;
8  }
9);
10
11let node;
12while (node = nodeIterator.nextNode()) {
13  if (!node.parentNode.closest('a') &&
14      !node.parentNode.closest('button') &&
15      node.parentNode.tagName !== 'A' &&
16      node.parentNode.tagName !== 'OPTION') {
17    node.textContent = node.textContent.replace(/\d{3}-\d{4}-\d{4}/g, function (match) {
18      return '<a href="tel:' + match.replace(/-/g, "") + '">' + match + '</a>';
19    });
20  }
21}

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

回答2件

ベストアンサー

textContentはHTMLエンティティ変換するので
要素にHTMLを入れたい場合は createElementしてappendするか、
innerHTMLで入れてください。

投稿2021/06/13 10:50

編集2021/06/13 10:52

m.ts10806

総合スコア80875

kadot

2021/06/13 11:09

要素にHTMLを入れるときは、その2択ということを知れてスッキリしました。いろいろなパターンを考えてはうまくいかず、 textContentはどうかと考えてしまっていたので、まず1つ選択肢を消せました。ありがとうございました。

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

このところで、

js
1
2    node.textContent = node.textContent.replace(/\d{3}-\d{4}-\d{4}/g, function (match) {
3      return '<a href="tel:' + match.replace(/-/g, "") + '">' + match + '</a>';
4    });
5

という箇所がありますが、ここで、node.textContent　= ...、とnode.textContentにそのまま代入されているので、文字を表示してしまいます。

HTMLコンテンツを修正したいのであれば、Element.innerHTMLを使って下さい。

以下の要にするといいでしょう。

js
1//    node.textContent = node.textContent.replace(/\d{3}-\d{4}-\d{4}/g, function (match) {
2//      return '<a href="tel:' + match.replace(/-/g, "") + '">' + match + '</a>';
3//    });
4    node.parentElement.innerHTML = node.textContent.replace(/\d{3}-\d{4}-\d{4}/g, function (match) {
5      return '<a href="tel:' + match.replace(/-/g, "") + '">' + match + '</a>';
6    });

ここで、注意したいのは、node.innerHTML = ではなくnode.parentElement.innerHTML = とするところに注意しましょう。

nodeは見たところ、Textノードであり、Element.innerHTMLはElementじゃないと使えないので、親のエレメントを経由して、innerHTMLにセットしましょう。

投稿2021/06/13 11:09

編集2021/06/13 11:11

nobkz

総合スコア320

kadot

2021/06/13 11:27 編集

とてもわかりやすい説明で、理解が深まりました。ありがとうございます。ただ、nobkzさんのコードだと入れ子になっているspanタグらへんがなくなってしまいました。子要素があるときは、直下のテキストノードにだけ処理ができればいけそうなのですが、何か方法ありますでしょうか？また、別の案ですがこちらでテキストノードにだけ処理したいという質問を投稿しています。もし、何かわかる場合、教えていただけると嬉しいです。よろしくお願いいたします。 https://teratail.com/questions/343751#reply-472414