怎么在HTML中实现高亮关键字-创新互联
这期内容当中小编将会给大家带来有关怎么在HTML中实现高亮关键字，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
10年积累的
成都网站设计、成都网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先
网站设计后付款的网站建设流程，更有
丽水免费网站建设让你可以放心的选择与我们合作。
思路：要想高亮元素，那么需要将关键字提取出来用标签包裹，然后对标签进行样式调整。使用 innerHTML，或 outHTML, 而不能使用 innerText,outText。
const regex = new RegExp(keyword,"g")
element.innerHTML = element.innerHTML.replace(regex,""+keyword+"")
element.classList.add("highlight")
这样做存在的隐患有如下：
keyword 如果是 ()\ 等正则对象的关键字将会构建正则对象失败。（可以通过转义解决）
keyword 如果是一些 HTML 标签如 div 将会对 innerHTML 进行错误的替换
keyword 如果和一些DOM属性名、值相同，也会导致异常替换。如下当 keyword 为 test 时，会将 class 名也错误的替换掉：
test
关键字父节点 element 通过 class 来进行背景染色处理，对原始DOM有一定程度污染，可能对 element 再次定位造成影响。（作为插件希望尽可能少改变原始DOM）
正则优化一：仅处理位于标签内的元素
var formatKeyword = text.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') // 转义处理keyword包含的特殊字符，如 /.
var finder = new RegExp(">.*?"++".*?<") // 提取位于标签内的文本，避免误操作 class、id 等
element.innerHTML = element.innerHTML.replace(finder,function(matched){
return matched.replace(text,"
"+text+)
})// 对提取的标签内文本进行关键字替换以能解决大多数问题，但依旧存在的问题是,只要标签属性存在类似 < 符号，将会打破匹配规则导致正则提取内容错误, HTML5 dataset 可以自定义任意内容，故这些特殊字符是无法避免的。
d">替换
总之在经过了N多尝试之后，通过正则都没能有效的处理各种情况。然后换了个思路，不通过字符串的方式，通过节点处理。element.childNodes 可以最有效的清理标签内的干扰信息。
通过 parent.childNodes 得到所有子节点。child 节点可以通过 innerText.replce(keyword,result) 的方式替换得到想要的高亮效果,如下： keyword 2 （递归处理：当child节点不含子节点时进行replace操作）。
