百搜论坛欢迎您的加入!
adimg adimg
 
昨日:篇  今日:篇   总帖:篇   会员:
博主最大Lv63   
html实现高亮关键字     

正则优化一:仅处理位于标签内的元素

1

2

3

4

5

6

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 可以自定义任意内容,故这些特殊字符是无法避免的。

1

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

(推荐教程:html教程

正则优化二:清除可能影响的标签

1

2

3

4

5

6

7

<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 节点处理

1

2

3

4

5

6

<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,更无法单独控制其样式。而文本节点也不能转换为普通节点。

更多编程相关内容,请关注php中文网编程入门栏目!

以上就是html实现高亮关键字的详细内容

 0  已被阅读了1068次  楼主 2020-06-22 12:14:57
回复列表

回复:html实现高亮关键字

联系站长 友链申请桂ICP备19000949号-1     桂ICP备19000949号-1
您的IP:18.224.214.215,2024-04-29 20:42:33,Processed in 0.02069 second(s).
免责声明: 本网不承担任何由内容提供商提供的信息所引起的争议和法律责任。
Powered by HadSky 7.12.9
已有0次打赏
(0) 分享
分享
取消
免责声明
1、本站资源,均来自网络,版权归原作者,所有资源和文章仅限用于学习和研究目的 。
2、不得用于商业或非法用途,否则,一切责任由该用户承担 !
如果觉得本文还不错请点个赞或者打赏点轻币哦~
拒绝伸手党,拿走请回复,尊重楼主,尊重你我他~

侵权删除请致信 E-Mail:207882320@qq.com