查找&使用好的Ole JavaScript替换Div中的单词

Finding & Replacing a Word within a Div Using Good Ole JavaScript

本文关键字：JavaScript Ole 替换 Div 单词 amp 查找      更新时间：2023-09-26

我知道在jQuery中做这件事很容易，但我正在尝试用JavaScript来做。

我有这个：

window.addEventListener('load', function() {
        function replaceName() {
        var oldText= "Mobile";
        var newText = "Stackoverflow";
        var oldString= document.getElementById('replace').innerHTML;
        var newString = oldString.replace(/oldText/g, newText);
        document.getElementById('replace').innerHTML = newString;
        }
        replaceName();
}, false);

不确定我做错了什么？有什么想法吗？

感谢

目前，您使用的是容易出错的方式。

容易出错，因为您将丢失事件处理程序以及替换您可能不想替换的东西。如果搜索词是'a'怎么办？是否希望所有a元素都变成替换字符串？

此外，您正在对DOM中的HTML进行不必要的串行化，当您再次设置它时，需要对其进行重新分析。

正确的方法是只对文本节点进行迭代。

var replaceText = function replaceText(element, search, replace) {
    var nodes = element.childNodes;
    for (var i = 0, length = nodes.length; i < length; i++) {
        var node = nodes[i];
        if (node.childNodes.length) {
            replaceText(node, search, replace);
            continue;
        }
        if (node.nodeType != 3) {
            continue;
        }
        node.data = node.data.replace(new RegExp(search, 'g'), replace);
    }
}

jsFiddle。

问题就在这里：

var newString = oldString.replace(/oldText/g, newText);

它实际上是在搜索oldText而不是"Mobile"

正如kb所说，您可以通过以下方式解决此问题：

var newString = oldString.replace(new RegExp(oldText, "g"), newText);

为了提供一个不使用eval的答案（在我之后重复：不要使用eval！），请尝试以下行：

var newString = oldString.replace(new RegExp(oldText, "g"), newText);

以前有/pattern/flags，现在有new RegExp(pattern, flags)

只需设置

var oldText = /Mobile/g
相关文章：