關鍵字檢索高亮標出-javasript/jQuery代碼實現

       此方法傳入2個參數，一個是被檢索內容所在的表單或者HTML元素的ID，另一為關鍵字，多個關鍵字的話，以空格隔開，下邊直接上代碼分享給大家：

/*關鍵詞檢索高亮標出
 *param idHtmlContent 需要檢索的HTML內容ID
 *param keyword 關鍵字，多個以空格隔開
 */
function keywordHighlight(idHtmlContent,keyword) {
    var content= $("#"+idHtmlContent).html();//獲取內容
    if ($.trim(keyword)==""){
        return;//關鍵字為空則返回
    }
    var htmlReg = new RegExp("\<.*?\>", "i");
    var arrA = new Array();
    //替換HTML標簽
    for (var i = 0; true; i++) {
        var m = htmlReg.exec(content);
        if (m) {
            arrA[i] = m;
        }else {
            break;
        }
        content = content.replace(m, "{[(" + i + ")]}");
    }
    words = unescape(keyword.replace(/\+/g, ' ')).split(/\s+/);
    //替換關鍵字 
    for (w = 0; w < words.length; w++) {
        var r = new RegExp("(" + words[w].replace(/[(){}.+*?^$|\\\[\]]/g, "\\$&") + ")", "ig");
        content = content.replace(r, "<b><span style='color:red;font-size:14px;'><u>"+words[w]+"</u></span></b>");//關鍵字樣式
    }
    //恢復HTML標簽 
    for (var i = 0; i < arrA.length; i++) {
        content = content.replace("{[(" + i + ")]}", arrA[i]);
    }
     $("#"+idHtmlContent).html(content);
}

效果：

注意，如果你是獲取的js網頁編輯器里的內容，直接傳入textarea的ID是不行的，結果是改變了但是樣式是顯示不出來的，最后的代碼應該像這樣：

var obj = KindEditor.create('textarea[id="' + containerId + '"]', config);
 obj.html(改變后的內容);