WordPress 搜尋結果關鍵詞加高亮 JS 程式碼

我們在使用百度或者 google 等搜尋引擎進行搜尋時，他們會自動給關鍵詞加上高亮的效果，那我們站內的搜尋結果關鍵詞如何加上高亮呢，很簡單，以下分享一段使用 jquery 來實現 WordPress 中搜尋結果關鍵詞高亮的效果，程式碼如下：

(function($){

	$.fn.textSearch = function(str,options){
		var defaults = {
			divFlag: true,
			divStr: " ",
			markClass: "",
			markColor: "red",
			nullReport: true,
			callback: function(){
				return false;
			}
		};
		var sets = $.extend({}, defaults, options || {}), clStr;
		if(sets.markClass){
			clStr = "'";
		}else{
			clStr = "style='color:"+sets.markColor+";'";
		}

		//對前一次高亮處理的文字還原
		$("span[rel='mark']").each(function() {
			var text = document.createTextNode($(this).text());
			$(this).replaceWith($(text));
		});


		//字串正規表示式關鍵字轉化
		$.regTrim = function(s){
			var imp = /[^.|()*+-$[]?]/g;
			var imp_c = {};
			imp_c["^"] = "^";
			imp_c["."] = ".";
			imp_c[""] = "";
			imp_c["|"] = "|";
			imp_c["("] = "(";
			imp_c[")"] = ")";
			imp_c["*"] = "*";
			imp_c["+"] = "+";
			imp_c["-"] = "-";
			imp_c["$"] = "$";
			imp_c["["] = "[";
			imp_c["]"] = "]";
			imp_c["?"] = "?";
			s = s.replace(imp,function(o){
				return imp_c[o];
			});
			return s;
		};
		$(this).each(function(){
			var t = $(this);
			str = $.trim(str);
			if(str === ""){
				alert("關鍵字為空");
				return false;
			}else{
				//將關鍵字 push 到陣列之中
				var arr = [];
				if(sets.divFlag){
					arr = str.split(sets.divStr);
				}else{
					arr.push(str);
				}
			}
			var v_html = t.html();
			//刪除註釋
			v_html = v_html.replace(/<!--(?:.*)-->/g,"");

			//將 HTML 程式碼支離為 HTML 片段和文字片段，其中文字片段用於正則替換處理，而 HTML 片段置之不理
			var tags = /[^<>]+|<(/?)([A-Za-z]+)([^<>]*)>/g;
			var a = v_html.match(tags), test = 0;
			$.each(a, function(i, c){
				if(!/<(?:.|s)*?>/.test(c)){//非標籤
					//開始執行替換
					$.each(arr,function(index, con){
						if(con === ""){return;}
						var reg = new RegExp($.regTrim(con), "g");
						if(reg.test(c)){
							//正則替換
							c = c.replace(reg,"♂"+con+"♀");
							test = 1;
						}
					});
					c = c.replace(/♂/g,"<span rel='mark' "+clStr+">").replace(/♀/g,"</span>");
					a[i] = c;
				}
			});
			//將支離陣列重新組成字串
			var new_html = a.join("");

			$(this).html(new_html);

			if(test === 0 && sets.nullReport){
				alert("沒有搜尋結果");
				return false;
			}

			//執行回撥函式
			sets.callback();
		});
	};
	$(".content-main").textSearch("<?php echo $keyword;?>");//新增搜尋關鍵詞
})(jQuery);

這段程式碼可以對搜尋空格的關鍵詞進行切分，分別高亮效果非常好。有興趣的朋友可去拿去嘗試以下。本站的搜尋以及啟用該功能，你可以檢視本站的搜尋。