Chrome拡張機能開発で、JavascriptのDOMでhtmlの置換が出来ない。

現在Chromeの拡張機能を開発中です。
「あ」を「い」に変換させたくコードを書いたのですが、何かが入れ子になっていてその要素が終わったら、後のやつが置換されません。とりあえず見ていただいたほうが早いと思います。

Javascript
1var d=document.body.getElementsByTagName("*");
2function tikan(elememts){
3    for (let i=0;i<elememts.length;i++) {
4        elememts[i].innerHTML=elememts[i].innerHTML.replace(/あ/g,"い");
5    }
6}
7tikan(d);

html
1<!DOCTYPE html>
2<html>
3<head>
4    <title>あ</title>
5</head>
6<body>
7    <p>
8        あ
9        <ul>
10            <li>あ</li>
11        </ul>
12        あ
13    </p>
14    </script>
15</body>
16</html>

したいこと↓

実行結果↓

Javascriptは完全に初心者なので文法的におかしいところもあると思いますがよろしくお願いします。

babu_babu_baboo

2021/02/26 13:34

タグ要素の中には更にテキストノードが含まれています。そこを考慮しましょう

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

回答2件

js
1<body>
2    <p>
3        あ
4        </p><ul>
5            <li>あ</li>
6        </ul>
7        あ
8    <p></p>
9
10
11
12<script>
13
14function getNextNode (node) {
15  let n;
16  if (n = node.firstChild) return n;
17
18  do {
19    if (n = node.nextSibling) return n;
20  } while (node = node.parentNode);
21
22  return null;
23}
24
25
26let start = document.body;
27for (let n = start; n = getNextNode (n); )
28  console.log (n.nodeName, n.nodeType, (n.data||'').trim());
29
30</script>
31

投稿2021/02/27 12:31

編集2021/02/27 12:35

babu_babu_baboo

総合スコア616

ベストアンサー

html
1<body>
2    <p>
3        あ
4        <ul>
5            <li>あ</li>
6        </ul>
7        あ
8    </p>
9    </script>
10</body>

<p>の中に<ul>を入れることはできないので、実際のパーズ結果は以下のようになっています:

html
1<body>
2    <p>
3        あ
4        </p><ul>
5            <li>あ</li>
6        </ul>
7        あ
8    <p></p>
9</body>

document.body.getElementsByTagName("*") は body の子孫の全要素を返しますが、3つ目の「あ」は body の直下にあり子孫要素の中には入っていないので置換対象になりません。

そもそもループなしでdocument.body.innerHTML = document.body.innerHTML.replace(/あ/g, "い")だけで目的を達成できるのではないでしょうか。

あと、拡張機能特有の話になりますが、対象ページ内のノードを勝手に再構築するとページ本来の挙動が壊れる可能性がものすごく高くなります。できるだけノードの作り直しはしないで、Textノードのdataプロパティを更新したほうが安全です。

追記: document.body 以下の Text ノードの data プロパティを置換するには以下のようにします。

javascript
1const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
2let text;
3while ((text = walker.nextNode())) {
4  text.data = text.data.replace(/あ/g, "い");
5}