特定クラスを持つ要素直下のテキストノードに含まれる特定文字列にのみaタグを付与したい

あるクラスを持っている要素のなかにaタグの付いていない電話番号があれば、
その電話番号部分にだけaタグをつけたいです。

今のところ、電話番号を囲むクラスに「telNumberParent」というクラスをつけて
そのクラスを持つ要素のテキストをinnerHTMLで取得し、
電話番号のパターンの正規表現で検索し、
aタグ付きに置換する処理をしています。（下記コード参照）

しかし、子要素にaタグを持っている要素にこの処理を行うと、
子要素のaタグにもaタグをつける処理になってしまい、HTML構造がおかしくなります。

なので、telNumberParentクラスを持っている直下のテキストノードだけを対象に
aタグをつける処理を行えないか考えているのですが、思いつきません。

わかる方、もしくは代替案などある方いたら教えていただきたいです。
よろしくお願いいたします。

※HTMLは一例です。どんな構造のHTMLにも対応させたいです。

【追記】
添付画像1枚目が、aタグに対しても処理してしまった結果、
aタグが重複した状態です。これを回避したいです。

添付画像2枚目が、処理したい範囲を表したものです。
今は、赤枠全体を対象に処理していますが、
黄枠だけ（直下のテキストノードだけ）で処理したいです。

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="test.js"></script>
33</body>

javascript
1const tel_pattern = /\d{3}-\d{4}-\d{4}/;
2
3const nodeIterator = document.createNodeIterator(
4  document.body,
5  NodeFilter.SHOW_TEXT,
6  function (node) {
7    return /\d{3}-\d{4}-\d{4}/g.test(node.nodeValue) ?
8      NodeFilter.FILTER_ACCEPT :
9      NodeFilter.FILTER_REJECT;
10  }
11);
12
13let node;
14while (node = nodeIterator.nextNode()) {
15  node.parentNode.classList.add('telNumberParent');
16}
17
18const hoge = document.querySelectorAll('.telNumberParent');
19
20for (let i = 0; i < hoge.length; i++) {
21  if (!hoge[i].closest('a') &&
22      !hoge[i].closest('button') &&
23      hoge[i].tagName !== 'OPTION') {
24    hoge[i].innerHTML =
25      hoge[i].innerHTML.replace(/\d{3}-\d{4}-\d{4}/g, function (match) {
26        return '<a href="tel:' + match.replace(/-/g, "") + '">' + match + '</a>';
27      });
28  }
29}

itagagaki

2021/06/13 03:30

ちょっとよくわからないのですが、問題となる具体例を教えていただけますか？

kadot

2021/06/13 03:45

追記しました。ご確認よろしくお願いいたします。

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

回答2件

ベストアンサー

https://teratail.com/questions/343813

こちらからの質問に回答していた者です。ちょっと質問がごちゃごちゃしてるので、個人的に質問を整理させていただくと

「ページ内にある、aタグが付いていない、電話番号のテキストにaタグを付けたい」

でよろしいでしょうか？そのように解答させていただきます。

また、回答の基準の質問者様のコードは以下を基準に説明させていただきますね。

js
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}

以前の私の(https://teratail.com/questions/343813)回答で、

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

と書きましたが、これだと、node.parentElementにある他の子要素まですっ飛ばしてしまいます。

「HTMLタグが文字列として表示されてしまう」では、Element.innerHTMLを利用して、文字列をDOMオブジェクトに変換してくださいと言いました。しかし、これは同時にElementの子要素も同時に変更してしまいます。だから、node.parentElementの他の子要素も消えてしまったわけです。

このため、方法としては、親要素のElement.innerHTMLを利用するのではなく、新しくElementオブジェクトを作成して、それを利用すれば良いのです。

簡単に変換関数を書いてみると、このようになるでしょう。

js
1// 文字列をNodeListに変換する関数
2function convertHtml(text){
3    const div = document.createElement("div");
4    div.innerHTML = `<div>${text}</div>`;
5    return div.firstChild.childNodes;
6}
7

さてこれを利用して、先の電話番号を置換した文字列をDOMに変換して、

 // 置き換えるべきHTMLテキスト
  const replaceHTML= node.textContent.replace(/\d{3}-\d{4}-\d{4}/g, function (match) {
      return '<a href="tel:' + match.replace(/-/g, "") + '">' + match + '</a>';
    });
 // 置き換えるべきDOMオブジェクト
 const replaceNodeLists = convertHtml(replaceText);

あとはDOMに変換したものを、先のTextノードと置き換えておけばよいのです。具体的には、置き換える前のTextノードの手前に挿入して、そのあとに置き換える前のTextノードを置換すればいいでしょう。

js
1        for(let childNode of replaceNodeLists){
2            const newNode = childNode.cloneNode(true);
3            node.parentNode.insertBefore(newNode, node);
4        }
5        node.parentNode.removeChild(node);
6

注意したいのは、ここでおそらくchildNodeをクローンしておかないとnode.parentNode.insertBefore(newNode,node);のとき、replaceNodeListsから要素が削除されループ処理がおかしくなる可能性があります。

おそらく以上の方法で、上記の問題は解決すると思います。（私はコードを試してませんが、おそらくこれで上手く動作するのではと思います）。以上を踏まえて、質問者の元のコード(https://teratail.com/questions/343813全体を置き換えると

javascript
1// 文字列をNodeListに変換する関数
2function convertHtml(text){
3    const div = document.createElement("div");
4    div.innerHTML = `<div>${text}</div>`;
5    return div.firstChild.childNodes;
6}
7
8
9const nodeIterator = document.createNodeIterator(
10  document.body,
11  NodeFilter.SHOW_TEXT,
12  function (node) {
13    return /\d{3}-\d{4}-\d{4}/g.test(node.nodeValue) ?
14      NodeFilter.FILTER_ACCEPT :
15      NodeFilter.FILTER_REJECT;
16  }
17);
18
19let node;
20while (node = nodeIterator.nextNode()) {
21  if (!node.parentNode.closest('a') &&
22      !node.parentNode.closest('button') &&
23      node.parentNode.tagName !== 'A' &&
24      node.parentNode.tagName !== 'OPTION') {
25      
26      // 置き換えるべきHTMLテキスト
27      const replaceHTML= node.textContent.replace(/\d{3}-\d{4}-\d{4}/g, function (match) {
28      return '<a href="tel:' + match.replace(/-/g, "") + '">' + match + '</a>';
29    });
30     // 置き換えるべきDOMオブジェクト
31     const replaceNodeLists = convertHtml(replaceText);
32
33     // DOMを置換する
34     for(let childNode of replaceNodeLists){
35            const newNode = childNode.cloneNode(true);
36            node.parentNode.insertBefore(newNode, node);
37      }
38      node.parentNode.removeChild(node);
39  }
40}

となるのではと思います。

投稿2021/06/13 14:36

nobkz

総合スコア320

kadot

2021/06/13 15:25 編集

ありがとうございます。こちらの質問にも回答いただけてとても嬉しいです。整理いただいた質問は、その通りです。わかりやすくしてくださりありがとうございます。いったんじっくり読んで試してみます。どうだったかなど、またご連絡します。よろしくお願いします。

kadot

2021/06/14 12:39

いただいた処理を使ってみました。完璧に置き換えられました。コードもじっくり読んでみたのですが「こんなふうに置き換えられるんだ！」と感動しました。ノードの仕組みとかも知れて勉強になりました。ありがとうございました。また機会がありましたらよろしくお願いいたします。

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

「いったんクラスを付けてからinnerHTMLで改変する」という方法ではなく、抽出したテキストノードそのものを使って、

「先祖要素にaがないこと」を確認する
リンクを作成したDocumentFragmentを立てる
parentNode.replaceChildでテキストノードとリンク付与したものを入れ替える、

のように進めてみてはいかがでしょうか？

投稿2021/06/13 03:57

maisumakun

総合スコア145932

kadot

2021/06/13 04:03

ありがとうございます。クラス付けることに囚われていました。やってみます！

kadot

2021/06/13 05:42 編集

以下のようにしてみました。 aタグ自体は狙った箇所についてます。しかし、置換後のテキストが[object Text]と表示されてしまいます。どこが間違っていそうでしょうか？ (これは別の質問として投稿すべきでしょうか？) const tel_pattern = /\d{3}-\d{4}-\d{4}/; const nodeIterator = document.createNodeIterator( document.body, NodeFilter.SHOW_TEXT, function (node) { return /\d{3}-\d{4}-\d{4}/g.test(node.nodeValue) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT; } ); let node; while (node = nodeIterator.nextNode()) { if (!node.parentNode.closest('a') && !node.parentNode.closest('button') && node.parentNode.tagName !== 'A' && node.parentNode.tagName !== 'OPTION') { let el = node.parentNode; let oldNode = node; let newNode = document.createElement('a'); let newNodeContent = document.createTextNode(node); newNode.appendChild(newNodeContent); el.replaceChild(newNode, oldNode); } }

kadot

2021/06/13 06:39

自己解決しました。 node.textContentとしなければ文字列として認識されなかったのですね。引き続き進めてみます。

kadot

2021/06/13 11:49 編集

このようにしたところ、電話番号以外にもaタグがついてしまう状態です。たとえば、「あいうえお～かきくけこ」までが1つのaタグに囲まれてしまいます。どこがおかしいでしょうか？ const tel_pattern = /\d{3}-\d{4}-\d{4}/; const nodeIterator = document.createNodeIterator( document.body, NodeFilter.SHOW_TEXT, function (node) { return /\d{3}-\d{4}-\d{4}/g.test(node.nodeValue) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT; } ); let node; while (node = nodeIterator.nextNode()) { if (!node.parentNode.closest('a') && !node.parentNode.closest('button') && node.parentNode.tagName !== 'A' && node.parentNode.tagName !== 'OPTION') { let el = node.parentNode; let oldNode = node; let newNode = document.createElement('a'); let newNodeContent = document.createTextNode(node.textContent); newNode.appendChild(newNodeContent); el.replaceChild(newNode, oldNode); } }

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

あなたの回答