纯 Javascript - 查找/替换 DOM 中的单词列表

Posted 2023-03-11

【中文标题】纯 Javascript - 查找/替换 DOM 中的单词列表

【英文标题】：Pure Javascript - Find/Replace a list of words in DOM

【发布时间】：2016-12-22 04:25:36

【问题描述】：

我有一个单词列表，我想在 DOM 中替换它们。

替换工作正常，但有问题。在被替换的文本之前和之后，它会放置一个不需要的斜杠（即减少为一个旅 > 减少/ OTHER WORD 1 /a brigade）

另外，我需要用一个 html 标签来包装被替换的单词，比如 . （即缩减为一个旅 > 将 OTHER WORD 1 缩减为一个旅）

您可以在此处查看代码： https://jsfiddle.net/realgrillo/9uL6ofge/

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

var words = [

    [/(^|\s)([Tt]o)(\s|$)/ig, 'OTHER WORD 1'],
    [/(^|\s)([Aa]nd)(\s|$)/ig, 'OTHER WORD 2']

];

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.data;

            for (var k = 0; k < words.length; k++)
            
                var from = new RegExp(words[k][0]);
                var to = new RegExp('$1' + words[k][1] + '$3');
                var replacedText = text.replace(from, to);

                //console.log("from: " + from);
                //console.log("to: " + to);
                //console.log("toDo: " + toDo);

                if (replacedText !== text)
                
                    element.innerHTML = element.textContent.replace(from, to);
                    console.log("text: " + text);
                    console.log("replacedText: " + replacedText);
                
            

            /*
            //
            //!!!!THIS CODE FOR 1 WORD WORKS!!!! I need to do this for the list of words.
            //
            var replacedText = text.replace(/(^|\s)([Tt]o)(\s|$)/ig, '$1OTHER WORD$3');

            if (replacedText !== text) 

                element.innerHTML = element.textContent.replace(/(^|\s)([Tt]o)(\s|$)/ig, '$1<b class=modified>OTHER WORD</b>$3');
            
            */
        
    

JS 高手们，能帮帮我吗？纯 javascript，请不要使用 jQuery。

谢谢。

【问题讨论】：

赞成这个问题，它有一个明确的目标，并且有一个简单且可测试的代码示例。

【参考方案1】：

我可以给你一些更简单的函数来使用。首先定义一个替换单词的函数，如下所示：

String.prototype.replaceAll = function (search, replacement) 
            try 
                var target = this;
                return target.split(search).join(replacement);
             catch (e) 
                return "";
            
        ;

这就是为什么纯javascript replace 函数在整个案例中只替换一次。之后，您可以在您的代码中使用它，如下所示：

var replacedText = text.replaceAll(/(^|\s)([Tt]o)(\s|$)/ig, '$1OTHER WORD$3');

【参考方案2】：

您不需要将words[k][0] 解析为RegExp，因为它已经是一个RegExp，即使它不会中断，因为构造函数会很好地处理RegExp。

同样对于words[k][1]，您也不需要将其解析为RegExp，因为String.prototype.replace 的第二个参数应为纯字符串。斜线在那里是因为您将 RegExp 转换为字符串（最终会输出）。

所以这是一个可以修复它的更改：

var to = '$1' + words[k][1] + '$3';

这是可选的，但可能是一个好习惯：

var from = words[k][0];

要获取 html 标记，您可以直接在每个 words[k][1] 或 to var 声明中更改它，具体取决于您的需要。

---

额外：

在 for 循环中，代码假定始终至少存在三个组（由于 '$3' 引用），另一种方法是直接在 words[k][1] 中委派此替换，但这取决于您决定。

【讨论】：

嗨@axelduch，感谢您的帮助。我更新了代码并且斜线消失了，但是包装粗体没有按预期工作。看看 Fiddle (jsfiddle.net/realgrillo/9uL6ofge/7)。并非所有替换的文本都是粗体的，我不知道为什么。你能帮帮我吗？

这与您循环遍历 dom 以替换内容的方式有关。 jsfiddle.net/9uL6ofge/8

嗨@axelduch，我看到了你的代码并且它有效，但是从文档中删除了所有html标签，丢失了所有段落。我将把这段代码用作 Chrome 插件，它会从我的客户端更改特定网站的一些文本，所以我需要更改文本，但保持布局。