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