最近项目遇到一个小需求，就是在一段文字中，高亮几个关键词，例如以下文字：
京东（）是中国一家自营式B2C购物网站，创始人刘强东担任京东集团CEO。旗下设有京东商城、京东金融、拍拍网、京东智能、O2O及海外事业部。正式获得虚拟运营商牌照。5月，在美国纳斯达克证券交易所正式挂牌上市（股票代码：JD）。6月与沃尔玛达成深度战略合作，1号店并入京东。1月4日，中国银联宣布京东金融旗下支付公司正式成为银联收单成员机构。4月25日，京东集团宣布正式组建京东物流子集团。8月3日，“中国互联网企业100强”榜单发布，京东排名第四位。
需要高亮的关键词：京东商城、京东、京东物流、京东集团
最简单的办法，就是利用正则表达式，像这样：
function addKeyWordHighline(oText,keyWords){//oText->一段文字,keyWords->关键词数组var returnVal=oText;for(var i=0;i<keyWords.length;i++){if(keyWords[i]!=''){returnVal=returnVal.replace(new RegExp(keyWords[i], "g"),'<span class="highLight">'+keyWords[i]+'</span>');}}return returnVal;}
但是这样子做，会导致两个问题：
1、“京东物流”“京东集团”无法高亮
2、重复添加高亮标签。关键词“京东”在“京东商城”后面，会导致文字“京东商城”变成
<span class="highLight"><span class="highLight">京东</span>商城</span>
改进思路（分别对应问题1、2）：
1、将关键词数组排序，长度较长的排在前面，优先高亮
2、将<span class="highLight">……</span>区域排除。主要利用正则表达式中的元字符?!pattern（正向否定预查）实现。
正向否定预查：在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如"Windows(?!95|98|NT|2000)"能匹配"Windows3.1"中的"Windows"，但不能匹配"Windows2000"中的"Windows"。
改进后的代码：
function addKeyWordHighline(oText,keyWords){var returnVal=oText,i=0,wordReg;keyWords.sort(compareWordLength);for(i=0;i<keyWords.length;i++){if(keyWords[i]!=''){wordReg=new RegExp('(?!<span+>.[^<]*)'+keyWords[i]+'(?!.[^<]*<\/span>)','g');returnVal=returnVal.replace(wordReg,'<span class="highLight">'+keyWords[i]+'</span>');}}return returnVal;}function compareWordLength(a,b){if(a.length>b.length){return -1;}else if(a.length<b.length){return 1;}else{return 0;}}
最终效果：
