javascript - 如何给给关键词 高亮

问题描述

问 题

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

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

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

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

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

解决方案

想到一种方法不知道可不可行，待验证：

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

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

3. 再把obj里对应的部分替换回去。

这篇关于javascript - 如何给给关键词 高亮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！