读书人

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

发布时间: 2012-12-07 11:18:41 作者: rapoo

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

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

/*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,'&').replace(/</g,'<').replace(/>/g,'>')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>的嵌套。不过也不影响效果。

读书人网 >Web前端

热点推荐