html实现高亮关键字

本文来自html教程栏目，文中为大家介绍了html实现高亮关键字的办法，拥有一定的参照 价值，但愿可以帮忙到大家。html实现高亮关键字可以通过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">替代

（举荐教程：html教程）

正则优化二：革除可能影响的标签

keyword
  =》将闭合标签用变量替代
  [replaced1]keyword[replaced2]//闭合标签内 id="keyword" 不会被处置
  =》
  [replaced1]keyword[replaced2]
  =》将暂存变量 replaced 替代为原先标签
  keyword

题目：要是 [replaced1] 包括 keyword, 那么替代时将产生异样。

最重要的，当标签值中包括 <> 符号时，此方法也不能正确的提取标签。

总之在经过了N多尝试之后，通过正则都没能有效的处置各种状况。然后换了个思绪，欠亨过字符串的方式，通过节点处置。element.childNodes 可以最有效的清算标签内的滋扰信息。

[完善解决方案]通过 DOM 节点处置

    keyword 1
  
    keyword 2
  
 

通过 parent.childNodes 得到所有子节点。child 节点可以通过 innerText.replce(keyword,result) 的方式替代得到想要的高亮结果,如下： keyword 2 （递归处置：当child节点不含子节点时进行replace操纵）。

但是 keyword 1 是属于文本节点，只能修改文本内容，没法添加 HTML，更没法独自控制其样式。而文本节点也不克不及转换为普通节点。

更多编程相干内容，请关注 百分百源码网 编程入门栏目！

以上就是html实现高亮关键字的细致内容，更多请关注 百分百源码网 其它相干文章！