最近項目遇到一個小需求，就是在一段文字中，高亮幾個關鍵詞，例如以下文字：

京東（JD.com）是中國一家自營式B2C購物網站，創始人劉強東擔任京東集團CEO。旗下設有京東商城、京東金融、拍拍網、京東智能、O2O及海外事業部。2013年正式獲得虛擬運營商牌照。2014年5月，在美國納斯達克證券交易所正式掛牌上市（股票代碼：JD）。2016年6月與沃爾瑪達成深度戰略合作，1號店并入京東。2017年1月4日，中國銀聯宣布京東金融旗下支付公司正式成為銀聯收單成員機構。2017年4月25日，京東集團宣布正式組建京東物流子集團。2017年8月3日，2017年“中國互聯網企業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;} }

最終效果：

總結

以上是生活随笔為你收集整理的正则：高亮多个相似关键词，如京东、京东物流、京东商城…的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。