Question

我想替换html内容中的单词（不是属性），我用Google搜索并找到变体正则表达式，但它们都不能覆盖所有情况。

例如将“width”替换为“[width]”

<div style="width: 200px">
    width is 300.
    <div>
        <div style="width: 100px">
            width is 200.
        </div>
    </div>
</div>

到

<div style="width: 200px">
    [width] is 300.
    <div>
        <div style="width: 100px">
            [width] is 200.
        </div>
    </div>
</div>

提前致谢

示例Live example

Answer 1

正如我在评论中所说，迭代所有文本节点并替换它们的内容。

function replaceText(element, pattern, replacement) {

    for(var child = element.firstChild; child; child = child.nextSibling) {
        if(child.nodeType === 3) {
            child.nodeValue = child.nodeValue.replace(pattern, replacement);
        }
        else if(child.nodeType === 1) {
            replaceText(child, pattern, replacement);
        }
    }

}

假设element是对根的引用：

replaceText(element, /(\b)width(\b)/g, '$1[width]$2');

DEMO

如果尚未解析HTML，则可以创建临时元素：

var tmp_root = document.createElement('div');
tmp_root.innerHTML = yourHTMLString;

可以使用.contents() ^[docs]使用jQuery来获取所有子节点，包括文本节点。

Answer 2

$('div').html(function() {
    return $(this).html().replace(/\b(width)\b/g, '[$1]');
});

http://jsfiddle.net/mblase75/zp8qE/

您必须使用.html而不是.text（以及\b来检查字边界），因为您将div嵌套在其他div中。

将/g更改为/gi以进行不区分大小写的搜索。

Answer 3

试试这个：

$("*").contents().filter(function(){ return this.nodeType != 1; }).each(function() {
    this.nodeValue = this.nodeValue.replace(/(\b)width(\b)/g, '$1[width]$2');
});

查看工作示例here。

想法是遍历文档的所有“文本”元素。我拿了jQuery的example code from its docs并对其进行了一些修改。

当然，您可以更改第一个选择器，使其仅适用于您想要的元素（例如，您可以$("div")而不是$("*")）。

如何替换html内容中的单词（不是属性）

3 个答案: