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

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

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

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

后来我又尝试 按照 文本的标签（p span p） 来匹配 ，意思就是把大段文本 拆成单个元素，分别匹配，当我觉得这样更加合理和可靠时，我又发现问题：我们的数据是爬下来的，所以格式又不是特别统一，各种各样格式，如：

2222222222
333333

这样的及时按照p标签来匹配，222222333333肯定就连贯起来了，页面效果也就由原来的换行-->现在不换行,而且没法判断还有未知的其他格式

有没有人给下解决思路。

最终搞了一个可行的方案，跟有些答主相似，方案是：
1替换所所有标签，并将标签保存到数组中2替换文本 3 从数组中找回标签，并组装

function SearchHighlight(idVal,keyword) { var pucl = document.getElementById(idVal); var temp=pucl.innerHTML; var htmlReg = new RegExp("\<.*?\>","i"); var arrA = new Array(); //替换HTML标签 for(var i=0;true;i++) { var m=htmlReg.exec(temp); if(m) { arrA[i]=m; } else { break; } temp=temp.replace(m,"{[("+i+")]}"); } //如果是字符串 转成数组 if(typeof(keyword)=="string"){ words = unescape(keyword.replace(/\+/g,' ')).split(/\s+/); }else{ words=keyword; } //替换关键字 for (w=0;w$1"); } //恢复HTML标签 for(var i=0;i

tag = /^<[\d\D]+?>/; text = /^[\d\D]+?(?=<|招聘|渠道)/; highlight = /^(?:招聘|渠道)/;

let ans = 原文本, source = 原文本, cap; while(source.length) { //标签优先级最高，匹配到了标签就直接扔掉 if(cap = tag.exec(source)) { //这句话就是把已经匹配到的部分从源中删除 source = source.slice(cap[0].length); //匹配到的部分经过你的变化，加入到答案中 //这里是匹配标签，不需要变化，就直接放到答案中了 ans += cap[0]; continue; } //然后就是需要高亮的文本，因为标签优先级最高，所以这里匹配到的高亮文本必定是在正文中的 if(cap = highlight.exec(source)) { source = source.slice(cap[0].length); //这里匹配到了高亮文本，所以左右两边加上了高亮用的标签 ans += '' + cap[0] + '<\/span'; continue; } //最后就是正文，处理方式和标签一样，匹配到了就直接扔掉 if(cap = text.exec(source)) { source = source.slice(cap[0].length); ans += cap[0]; continue; } } return(ans);