使用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时,您将不必要地序列化来自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.