Question

我想在不更改任何html标签或js代码的情况下替换文档中的某些单词。

基本上我所做的是;

document.body.innerHTML = document.body.innerHTML.replace('lorem','new lorem');

但是这段代码将取代任何'lorem'。我想避免像这样的标签; <script... var lorem = 123; <div class="lorem", <a id="lorem"等。

我怎样才能在JS中做到这一点？

Answer 1

走DOM，.replace()文本节点的值。

function walk(el, fn) {
    for (var i = 0, len = el.childNodes.length; i < len; i++) {
        var node = el.childNodes[i];
        if (node.nodeType === 3)
            fn(node);
        else if (node.nodeType === 1 && node.nodeName !== "SCRIPT")
            walk(node, fn);
    }
}

walk(document.body, function(node) {
    var text = node.data.split("foo"),
        parent = node.parentNode,
        i = 1,
        newNode;

    parent.insertBefore(textNode(text[0]), node);

    for (; i < text.length; i += 2) {
        (newNode = document.createElement("b"))
                           .appendChild(textNode("bar"));
        parent.insertBefore(newNode, node);
        parent.insertBefore(textNode(text[i]), node);
    }
    parent.removeChild(node);
});

function textNode(txt) {
    return document.createTextNode(txt);
}

Answer 2

另一种方法是使用正则表达式，科学不能将HTML标记插入文本节点。

首先，我使用正则表达式来捕获HTML标记之外的body.innerHTML属性。

但是，该字符串还包含另一个数据，如果我将直接用新数据替换它，则某些文本将丢失。

Insted，我将每个匹配作为函数的参数，在此函数中我使用另一个正则表达式。

请注意，您必须两次替换“foo”。

代码：

document.body.innerHTML=document.body.innerHTML.replace(/<[^(script)][^>]*>[^<]*(foo)[^<]*</g,function(match){ return match.replace(/foo/,"newWord"); });

JS只替换没有html标签和代码的文本

2 个答案: