關鍵字檢索高亮標出-javasript/jQuery程式碼實現
阿新 • • 發佈:2019-01-21
此方法傳入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(改變後的內容);