通过正则对搜索的内容进行高亮显示

首先，要想到用户可能输入任意字符，所以要先处理正则里面的有特殊意义的字符。如下：

function pregQuote_(str){
     return str.replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\|\:])/g, '\\$1');
}

 

 

  做好了上面的基本处理，要对搜索的内容进行高亮显示，一般来说只需要做进行一个简单的替换就好：

如下：

/*
searchValue:搜索的内容
pregSearchValue:处理后的搜索内容
sourceValue:需要进行搜索的内容
*/
pregSearchValue = pregQuote_(searchValue);
var re = new RegExp(pregSearchValue,'g');
sourceValue = sourceValue.replace(re,'<b>' + searchValue + '</b>');

 

 但是，如果我们对某段内容进行搜索，而这段内容是html格式，那么，我们就会希望对标签内的内容不进行搜索，而只对显示的内容进行搜索。那么我们就需要修改我们的替换正则了。

如下：

/*
searchValue:搜索的内容
pregSearchValue:处理后的搜索内容
sourceValue:需要进行搜索的内容
*/
pregSearchValue = pregQuote_(searchValue);
var re = new RegExp('([^>]*)' + pregSearchValue + '([^>]*<)', 'g');
sourceValue = sourceValue.replace(re,'$1<b>' +searchValue+'</b>$2');
var re2 = new RegExp('(>[^<]*)' +pregSearchValue + '([^<]*)', 'g');
sourceValue = sourceValue.replace(re2,'$1<b>' + searchValue +'</b>$2');

 

 但是这个正则只适用于这段内容存在html标签，如果不存在的话就则用前面那个简单的匹配就好了。

如果这段html出现一些<>这种符号，则会影响上面那个正则的判断。

这个时候，我们需要把这段html改成html标准的源码格式，这样出现在显示内容中的<>就会变成&lt;&gt;这种格式的。同时搜索内容也要进行这种转义的替换，确保搜索的内容和线上的内容转换成相同内容的不同格式。

最终代码如下：

/*sourceText:为转义过的html*/
var tempNode = document.createElement('div');
tempNode.innerHTML = sourceValue;
sourceText = tempNode.innerHTML;
function highLightedText(searchValue,sourceText){
/*sourceText:为转义过的html*/
var tempNode = document.createElement('div');
tempNode.innerHTML = sourceValue;
sourceText = tempNode.innerHTML;

searchValue = searchValue.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
pregSearchValue = pregQuote_(searchValue);

if(if(sourceText.indexOf('<')!=-1){
var re = new RegExp('([^>]*)' + pregSearchValue + '([^>]*<)', 'g');
sourceText = sourceText.replace(re,'$1<b>' +searchValue+'</b>$2');
var re2 = new RegExp('(>[^<]*)' +pregSearchValue + '([^<]*)', 'g');
sourceText = sourceText.replace(re2,'$1<b>' + searchValue +'</b>$2');
}else{
     var re = new RegExp(pregSearchValu, 'g');
     sourceText = sourceText.replace(re,'<b>' + searchValue +'</b>');    
}
return sourceText;
}

 

 不过，由于做了两次遍历，所以会对部分内容做两个<b>的嵌套。不过也不影响效果。