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

Question

我有一个单词列表，我想在 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。

谢谢。

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

Answer 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] 中委派此替换，但这取决于您决定。