我现在想给 页面上的一段文本 遍历并高亮元素。
效果如下:
之前做法,是直接用正则 ,即带着标签和文本一起匹配,但这样有一个问题 ,就是如果关键字在html标签中存在,例如 关键字‘as’ ,一定会命中当前元素中的 “class=""”,造成页面混乱。
如果不用正则 ,直接replace文本, 例: $(this).html($(this).replace("例子","例子)); 虽然有效,但是 职能替换收个出现的元素 ,不能替换所有 ,我也不太清楚是否有能替换所有的函数(除了正则)
后来我改进了,我直接把所有的元素的文本先都取出来,对着文本一通改,这样能保证一定匹配对,匹配完整,但是问题是,如果这个dom结构是个多层级的嵌套,把匹配的结果在打上原来的标签又是一件麻烦事,我索性就自定义他们的标签,来完成展示。我知道 这样肯定也不合理。
后来我又尝试 按照 文本的标签(p span p) 来匹配 ,意思就是把大段文本 拆成单个元素,分别匹配,当我觉得这样更加合理和可靠时,我又发现问题:我们的数据是爬下来的,所以格式又不是特别统一,各种各样格式,如:
2222222222
333333
有没有人给下解决思路。
最终搞了一个可行的方案,跟有些答主相似,方案是:
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
想到一种方法不知道可不可行,待验证:
先使用replace,正则替换html标签<>(可能有点复杂),replace好像有回调函数,每次替换不同的内容,同时保存替换内容(特殊格式)和被替换内容(html标签)到集合obj;
替换后的内容使用replace替换高亮内容;
再把obj里对应的部分替换回去。
replace的里面可以写正则
lucene
为什么不在当初写文章的时候就标记好这些格式……
我想到了个解决方案,不过稍微有点麻烦的,还是用正则的。
根据你的要求,可以把文章分成三种成分:
标签
,不需要高亮的文本
、需要高亮的文本
。就比如你需要高亮的文本是
招聘
和渠道
吧。这三种成分,我们可以写出它们的正则:
然后就是把原文本从左往右依次读取啦:
大概流程就是这样,我没有测试过,但这个思路肯定是可行的,具体细节你自己捣鼓捣鼓。