html实现高亮关键字-百分百源码网

html实现高亮关键字

发布时间：09/01 来源：未知浏览：关键词：

正则优化一：仅处置位于标签内的元素

var formatKeyword = text.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') // 转义处置keyword包括的非凡字符，如 /.
var finder = new RegExp(">.*?"++".*?<") // 提取位于标签内的文本，幸免误操纵 class、id 等
 
element.innerHTML = element.innerHTML.replace(finder,function(matched){
        return matched.replace(text,"<br>"+text+</br>)
})// 对提取的标签内文本停止关键字更换

以能解决大多数问题，但照旧存在的问题是,只要标签属性存在相似 < 符号，将会打破匹配规则致使正则提取内容错误, HTML5 dataset 可以自定义任意内容，故这些非凡字符是没法幸免的。

<div dataset="p>d">更换</div>

（引荐教程：html教程）

正则优化二：清除大概影响的标签

<div id="keyword">keyword</div>
  =》将闭合标签用变量更换
  [replaced1]keyword[replaced2]//闭合标签内 id="keyword" 不会被处置
  =》
  [replaced1]<b>keyword</b>[replaced2]
  =》将暂存变量 replaced 更换为本来标签
  <div id="keyword"><b>keyword</b></div>

问题：假如 [replaced1] 包括 keyword, 那么更换时将发生非常。

最重要的，当标签值中包括 <> 符号时，此办法也不克不及准确的提取标签。

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

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

<div id="parent">
    keyword 1
  <span id="child">
    keyword 2
  </span>
 </div>

通过 parent.childNodes 得到所有子节点。child 节点可以通过 innerText.replce(keyword,result) 的方式更换得到想要的高亮结果,如下： <span id="child"><b>keyword</b> 2</span> （递归处置：当child节点不含子节点时停止replace操纵）。

但是 keyword 1 是属于文本节点，只能修改文本内容，没法增添 HTML，更没法独自操纵其样式。而文本节点也不克不及转换为一般节点。

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

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

打赏