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

Question

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

替换有效，但是有问题。 在替换的文本前后，它放置了一个不希望的斜杠（即减少为一个旅>减少/ OTHER WORD 1 /一个旅）

另外，我需要用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 ，所以它不会中断。

同样对于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声明中对其进行to 。

---

额外：

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