1. 程式人生 > >關鍵字檢索高亮標出-javasript/jQuery程式碼實現

關鍵字檢索高亮標出-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(改變後的內容);

最後,認真看過的網友們,大神們,如有感覺我這個程式猿有哪個地方說的不對或者不妥或者你有很好的議或者建議或點子方法,還望您大恩大德施捨n秒的時間留下你的寶貴文字(留言),以便你,我,還有廣大的程式猿們更快地成長與進步......