替换HTML字符串并避免标记（regex）

Question

我正在尝试使用JS替换包含html标签+属性和样式的字符串中的特定字符串，同时避免标签的内侧被读取或匹配（并在文本中保留原始标签）。

例如，我希望<span> this is span text </span>成为： <span> this is s<span class="found">pan</span> text </span>当关键字为“ pan”时<span> this is s<span class="found">pan</span> text </span> ”

我尝试过使用正则表达式..到目前为止，我的正则表达式：

$(this).html($(this).html().replace(new RegExp("([^<\"][a-zA-Z0-9\"'\=;:]*)(" + search + ")([a-zA-Z0-9\"'\=;:]*[^>\"])", 'ig'), "$1<span class='found'>$2</span>$3"));

仅当诸如<span class="myclass"> span text </span>情况下，此正则表达式才会失败，当search =“ p”时，结果为：

<s<span class="found">p</span>an class="myclass"> s<span class="found">p</span>an text</s<span class="found">p</span>an>

*本主题应为任何寻求匹配并替换匹配字符串的人提供帮助，同时避免替换由特定字符包围的字符串。

Answer 1

不要将正则表达式与html一起使用，而是遍历和操纵DOM：

doc = $('<div><span class="myclass"> span text </span></div>')
$(doc).find("*").andSelf().contents().each(function() {
    if(this.nodeType == 3)
        $(this).replaceWith($(this).text().replace(/p/g, "<b>p</b>"))
})
console.log(doc.html())
// <span class="myclass"> s<b>p</b>an text </span>

如果您坚持使用正则表达式，则如下所示：

text = '<span class="myclass"> <p>span</p> </span>'
found = 'p'
re = new RegExp(found + '(?=[^<>]*(<|$))', 'g')
text = text.replace(re, "<b>$&</b>")
console.log(text)
// <span class="myclass"> <p>s<b>p</b>an</p> </span>

Answer 2

正如thg435所说，处理html内容的好方法是使用DOM。

但是，如果要避免替换，可以先匹配然后再替换。

避免html标签的示例：

var text = '<span class="myclass"> span text </span>';

function callback(p1, p2) {
    return ((p2==undefined)||p2=='')?p1:'<span class="found">'+p1+'</span>';
}

var result = text.replace(/<[^>]+>|(p)/g, callback);

alert(result);