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

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

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

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

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

有没有人给下解决思路。