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

Pure Javascript - Find/Replace a list of words in DOM

本文关键字：单词 列表 DOM 替换 Javascript 查找      更新时间：2023-09-26

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

替换工作，但它有一个问题。在被替换的文本之前和之后，它放置一个不希望的斜杠(即减少到一个旅>减少/OTHER WORD 1/a旅)

另外，我需要用html标记包装被替换的单词，如。(即缩编为一个旅>缩编为一个旅)

你可以看到下面的代码: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。

谢谢。

我可以给你一些更简单的函数。首先定义一个函数来替换像这样的单词:

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');

您不需要将words[k][0]解析为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]中直接委托此替换，但这取决于您的决定。

相关文章：