常规优化1:只处理标签中的元素

一个

2

三

四

五

六

var format key=text.replace(/[-\/\\^$*？()|[\]{}]/g，' \\$') //转义关键字中包含的特殊字符，如/。

var finder=new RegExp('。*?'。*?')//提取标签中的文本，避免误操作类、id等

element . InnerHTML=element . InnerHTML . replace(finder，function(matched){

return matched.replace(text，' br' text /br)

})//对标签中提取的文本进行关键词替换

解决了大部分问题，但是还有一个问题，就是只要标签属性中有相似的符号，就会打破匹配规则，导致常规内容抽取出现错误。HTML5数据集可以自定义任何内容，所以这些特殊字符是不可避免的。

一个

Div数据集='pd' replace /div

(推荐教程：html教程)

常规优化2:清除可能影响

一个

2

三

四

五

六

七

div id='keyword '关键字/div

="用变量替换封闭标签

不会处理封闭标记中的[replace1]关键字[replace2]//id='keyword '

=》

[replace D1]b关键字/b[replaced2]

="替换用原始标签替换的临时变量

div id=' key ' b keyword/b/div

问题：如果[replaced1]包含关键字，则替换时将出现异常。

最重要的是，当标签值包含符号时，这种方法不能正确提取标签。

总之，经过n次以上的尝试，都无法通过正则化有效处理各种情况。然后，我们改变了思维，不是通过字符串，而是通过节点。元素。子节点可以最有效地清除标签中的干扰信息。

【完美解决方案】通过DOM节点处理

一个

2

三

四

五

六

div id='parent '

关键字1

span id='child '

关键字2

/span

/div

通过父节点获取所有子节点.子节点可以由innertext替换。replice(关键字，结果)以获得所需的高亮效果，如下所示：span id='child'bkeyword/b 2/span(递归处理：当子节点没有子节点时替换)。

但关键字1属于文本节点，只能修改文本内容，不能添加HTML，不能独立控制样式。文本节点无法转换成普通节点。