正則：高亮多個類似關鍵詞，如京東、京東物流、京東商城…

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

京東（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;
}

可是這樣子作，會致使兩個問題：
一、「京東物流」「京東集團」沒法高亮
二、重複添加高亮標籤。關鍵詞「京東」在「京東商城」後面，會致使文字「京東商城」變成

<span class="highLight"><span class="highLight">京東</span>商城</span>

改進思路（分別對應問題一、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;
    }
}

最終效果：