HTML高亮关键词真麻烦
时间：2023-04-02 15:01:09
HTML
有这么一个功能：在网页中高亮关键词。本以为简单的innerHTMLreplace操作就可以实现，结果遇到了很多问题。本文记录这些问题以及最终的完美解决方案，希望对有相同经历的朋友有所帮助。如果只对结果感兴趣，忽略过程，直接跳过看结果~常用方法：正则替换思路：如果要突出元素，需要提取关键词包裹在标签中，然后调整样式的标签。使用innerHTML或outHTML，但不使用innerText、outText。constregex=newRegExp(keyword,"g")element.innerHTML=element.innerHTML.replace(regex,""+keyword+"")element.classList.add("highlight")这样做的隐患是：如果关键字是()\等正则对象的关键字，则正则对象的构造会失败。（可以通过转义解决）如果关键字是一些html标签，比如div，innerHTML会被错误替换。如果关键字与某些DOM属性名称和值相同，也会导致异常替换。如下，当关键字为test时，类名会被错误替换为：test
关键字的父节点元素来了通过class的背景着色过程会在一定程度上污染原DOM，可能会影响元素的重新定位。（作为插件，希望尽量少改动原有的DOM）常规优化一：只处理位于标签内的元素varformatKeyword=text.replace(/[-\/\\^$*+?.()|[\]{}]/g,'\\$&')//对关键字中包含的特殊字符进行转义，例如/.varfinder=newRegExp(">.*?"++".*?<")//提取标签里面的文本，避免误用class,id等element.innerHTML=element.innerHTML.replace(finder,function(matched){returnmatched.replace(text,"
"+text+)})//将提取出来的标签中的文本替换成关键字可以解决大部分问题，但是还有一个问题就是只要标签属性中有<符号，它会破坏匹配规则并导致常规提取内容出错。HTML5数据集可以自定义任意内容，所以这些特殊字符是无法避免的。
d">Replace 