我正在尝试使用JS来替换包含html标签+属性和样式的字符串中的特定字符串,同时避免标记的内侧被读取或匹配(并保留文本中的原始标记)。
例如,当关键字为“pan”时,我希望<span> this is span text </span>
成为:<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"));
当搜索=“p”时,此正则表达式仅在<span class="myclass"> span text </span>
之类的情况下失败,结果:
<s<span class="found">p</span>an class="myclass"> s<span class="found">p</span>an text</s<span class="found">p</span>an>
*此主题应该帮助任何寻求匹配并替换匹配字符串的人,同时避免被特定字符包围的字符串替换。
答案 0 :(得分:6)
不要将正则表达式与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>
答案 1 :(得分:4)
正如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);