如何给给关键词 高亮？

我现在想给 页面上的一段文本 遍历并高亮元素。
效果如下：

之前做法，是直接用正则 ，即带着标签和文本一起匹配，但这样有一个问题 ，就是如果关键字在html标签中存在，例如 关键字‘as’ ，一定会命中当前元素中的 “class=""”,造成页面混乱。

如果不用正则，直接replace文本， 例： $(this).html($(this).replace("例子","<span class="highLight">例子</span>));虽然有效，但是 职能替换收个出现的元素，不能替换所有 ，我也不太清楚是否有能替换所有的函数（除了正则）

后来我改进了，我直接把所有的元素的文本先都取出来，对着文本一通改，这样能保证一定匹配对，匹配完整，但是问题是，如果这个dom结构是个多层级的嵌套，把匹配的结果在打上原来的标签又是一件麻烦事，我索性就自定义他们的标签，来完成展示。我知优艾设计网_设计道这样肯定也不合理。

后来我又尝试 按照 文本的标签（p span div）来匹配，意思就是把大段文本 拆成单个元素，分别匹配，当我觉得这样更加合理和可靠时，我又发现问题：我们的数据是爬下来的，所以格式又不是特别统一，各种各样格式，如：<p>2222222222<br>333333</p>这样的及时按照p标签来匹配，222222333333肯定就连贯起来了，页面效果也就由原来的换行-->现在不换行,而且没法判断还有未知的其他格式

有没有人给下解决思路。

---

123457245 4小时前

优艾设计网_设计客

大概流程就是这样，我没有测试过，但这个思路肯定是可行的，具体细节你自己捣鼓捣鼓。

---

Anla0617 优艾设计网_设计百科 4小时前

先使用replace，正则替换html标签<>（可能有点复杂），replace好像有回调函数，每次替换不同的内容，同时保存替换内容（特殊格式）和被替换内容（html标签）到集合obj；

---

zhouyuanhuei 4小时前

优艾设计网_设计客

replace的里面可以写正则

---

贡幼旋 优艾设计网_设计LOGO 4小时前

替换后的内容使用replace替换高亮内容；

---

墨小白掩饰不了的爱被爱删除蝶霜 优艾设计网_设计 4小时前

为什么不在当初写文章的时候就标记好这些格式……

---

健康最重要2015 4小时前

优艾设计网_Photoshop百科

lucene

---