javascript - 使用 Good Ole JavaScript 在 Div 中查找和替换单词

Question

我知道这在 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);

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

谢谢

Answer 1

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

容易出错，因为您将丢失事件处理程序以及替换您可能不想替换的东西。如果搜索词是 '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 .