【问题标题】:JS replace only text without html tags and codesJS只替换没有html标签和代码的文本
【发布时间】:2012-10-17 21:56:13
【问题描述】:

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

基本上我做的是;

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

但此代码将替换任何“lorem”。我想避免这样的标签; <script... var lorem = 123; <div class="lorem", <a id="lorem"

如何在 JS 中做到这一点?

【问题讨论】:

    标签: javascript replace


    【解决方案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);
    }
    

    【讨论】:

    • 谢谢。它工作得很好。只有一件事,我不能用替换来处理html标签。我想做替换(/foo/g, "bar");但它不影响因为 node.data
    • @kentilyuk:我以为你不想替换任何元素。 DOM 不是字符串,所以不,那是行不通的。您实际上需要做什么?
    • 我想找到 'foo' 并使用或不使用 'bar'、'bar'、'bar'、'bar' 等
    • @kentilyuk:所以你是说你想将匹配的文本包装在一个元素中?同样,DOM 不是字符串。我们不会使用HTML 标记来完成此操作。
    • 是的。这就是我尝试做的。
    【解决方案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代码。我在正文中有
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-12-08
    • 1970-01-01
    • 2017-02-28
    • 2017-12-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多