javascript - 使用javascript替换网页上的多个文本字符串

Question

我想制作一个 google chrome 扩展程序来替换网页上的许多不同的文本字符串，以在客户端显示不同的单词。我来到下面这个例子。

但是我尝试了很多改变它来处理要替换的不同单词后失败了。我一次只能处理一个。

即:我想将所有“粉红色”单词更改为“蓝色”，将所有“猫”单词更改为“狗”，将所有“男孩”单词更改为“女孩”。一次全部。

我怎样才能做到这一点？当我一直修改这个示例代码时，我最终只会更改其中一个单词。在某些情况下，仅在其第一次出现时。

提前致谢。我无法在任何地方回答这个问题。对不起，如果它看起来很笨拙。

var elements = document.getElementsByTagName('*');

for (var i = 0; i < elements.length; i++) {
    var element = elements[i];

    for (var j = 0; j < element.childNodes.length; j++) {
        var node = element.childNodes[j];

        if (node.nodeType === 3) {
            var text = node.nodeValue;
            var replacedText = text.replace(/pink/gi, 'blue');

            if (replacedText !== text) {
                element.replaceChild(document.createTextNode(replacedText), node);
            }
        }
    }
}

Answer 1

为了简化多个字符串到它们的替换的映射，您可以为您的替换创建一个 js 对象和相应的函数。

根据来自 @MihaiIorga 的评论进行编辑以提高可用性(现在您只需编辑 matches 即可添加新的替换词)。例如(为简单起见，在下面的代码片段中仅选择 <div> 标签，但您可以修改以选择所有元素、某些标签等):

const matches = { pink: 'blue', cat: 'dog', boy: 'girl' };
const replaces = Object.keys(matches).join('|');
const replacer = (s) => matches[s];
const elems = document.getElementsByTagName('div');
for (const elem of elems) {
  const s = elem.textContent;
  elem.textContent = s.replace(new RegExp(replaces, 'gi'), replacer);
}

<div>pink horse</div>
<div>green cat</div>
<div>purple boy moon</div>
<div>boy pink cat</div>