javascript - 如何在不破坏现有 HTML 的情况下更改 DOM 中的所有文本？

Question

我想用 JavaScript 替换页面上的特定文本。为了简单起见，假设我想用字母 X 替换所有字母 A。重要的是它不会破坏内联 HTML。

是否有一种简单的方法来迭代所有 DOM 元素并且仅更改实际文本？

<span>hello world <a href="/">abcd</a>..</span>

应该变成

<span>hello world <a href="/">xbcd</a>..</span>

而不是

<spxn>hello world <x href="/">xbcd</x>..</spxn>

Answer 1

迭代all text nodes ，如果它们包含 a，则更改它们的 nodeValue:

function getAllTextNodes() {
    var walker = document.createTreeWalker(
        document.body, 
        NodeFilter.SHOW_TEXT, 
        null, 
        false
    );

    var node;
    var textNodes = [];

    while(node = walker.nextNode()) {
        textNodes.push(node);
    }
    return textNodes;
}

getAllTextNodes().forEach((node) => {
  const { nodeValue } = node;
  const newValue = nodeValue.replace(/a/g, 'x');
  if (newValue !== nodeValue) {
    node.nodeValue = newValue;
  }
});

<a href="/">abcd</a>

如果需要，您还可以创建文本节点可更改的父级白名单或黑名单:

function getAllTextNodes() {
    var walker = document.createTreeWalker(
        document.body, 
        NodeFilter.SHOW_TEXT, 
        null, 
        false
    );

    var node;
    var textNodes = [];

    while(node = walker.nextNode()) {
        textNodes.push(node);
    }
    return textNodes;
}

const tagNamesToKeepUnchanged = ['SCRIPT'];

getAllTextNodes().forEach((node) => {
  if (tagNamesToKeepUnchanged.includes(node.parentNode.tagName)) {
    return;
  }
  const { nodeValue } = node;
  const newValue = nodeValue.replace(/a/g, 'x');
  if (newValue !== nodeValue) {
    node.nodeValue = newValue;
  }
});

const obj = JSON.parse(
  document.querySelector('script[type="application/json"]').textContent
);
console.log(obj.key);

<a href="/">abcd</a>
<p>foo bar</p>
<script type="application/json">{"key":"value"}</script>

这将保留标签名称、事件监听器以及除某些文本节点的内容之外的几乎所有内容。