JavaScript-如何通过js使搜索关键词高亮
希望是后端和前端配合的一个搜索结果高亮关键词，资料我查了很多，但是都是后端直接处理的，我想大家有没有前端配合后端的一个高效程序呢？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
希望是后端和前端配合的一个搜索结果高亮关键词，资料我查了很多，但是都是后端直接处理的，我想大家有没有前端配合后端的一个高效程序呢？
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论（8）
后端实现过滤关键词算法，然后把关键词返回到前段。
下面是前段处理关键词高亮代码，当前段接收到后端的关键词后赋值给keystr就可以了。
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> new document </title>
</head>
<body>
<pre>
用JS让文章内容指定的关键字加亮
现在有这些关键字:php,web开发,java
当在文章里头出现这些关键字,就把它加亮显示..
文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...
这个特效功能很不错吧
</pre>
<script language="JavaScript">
function highlight(key) {
var key = key.split('|');
for (var i=0; i<key.length; i++) {
var rng = document.body.createTextRange();
while (rng.findText(key[i]))
//rng.pasteHTML(rng.text.fontcolor('red'));
rng.pasteHTML('<div style="border:1 solid red;display:inline"><a href="#" title='+ rng.text +'>' + rng.text + '</a></div>');
}
}
var keystr = '文章|关键|功能';
highlight(keystr);
</script>
</body>
</html>
可以使用JQuery插件highlight，JavaScript text higlighting jQuery plugin,自己写的话也蛮简单，直接动态设置关键词的style即可。
不知道smarty的处理方式你否感兴趣，
{*section name=i loop=$cout.qlist*}
{*assign var=word value="<span class='red'>`$smarty.get.keyword`</span>"*}
{*$cout.qlist[i].ql_answer|replace:$smarty.get.keyword:$word*}
{*/section*}
var skey='词语高亮';
window.onload = function () {
if(skey.length>=2 && skey.length<=10){
if (document.createRange) {
var range = document.createRange();
} else {
var range = document.body.createTextRange();
//var bookmark = range.getBookmark();
}
if(range.findText){
range.collapse(true);
//range.moveToBookmark(bookmark);
while (range.findText(skey)) {
range.pasteHTML(range.text.fontcolor("#ff0000"));
}
//document.selection.empty();
} else {
var s,n;
s = window.getSelection();
s.collapse(document.getElementById("result"),0);
while (window.find(skey)) {
var n = document.createElement("span");
n.style.color="#ff0000";
s.getRangeAt(0).surroundContents(n);
s.collapseToEnd();
}
window.getSelection().removeAllRanges();
window.scroll(0,0);//滚动到顶部
}
} else {
alert('搜索字数在2-10个字');
}
}
此方法火狐ie没有问题，但是浏览器不太兼容有点问题；360急速直接卡死；while循环死掉了；知道的可以完善下！谢谢！
我这里也测试了一个前端JavaScript高亮的代码，你可以试试，还是不错的。
<script language="javascript">
function fHl(o, flag, rndColor, url){
var bgCor='';
var fgCor='';
if(rndColor){
bgCor=fRndCor(10, 20);
fgCor=fRndCor(230, 255);
} else {
bgCor='#F0F';
fgCor='black';
}
var re=new RegExp(flag, 'i');
for(var i=0; i<o.childNodes.length; i++){
var o_=o.childNodes[i];
var o_p=o_.parentNode;
if(o_.nodeType==1) {
fHl(o_, flag, rndColor, url);
} else if (o_.nodeType==3) {
if(!(o_p.nodeName=='A')){
if(o_.data.search(re)==-1)continue;
var temp=fEleA(o_.data, flag);
o_p.replaceChild(temp, o_);
}
}
}
function fEleA(text, flag){
var style=' style="background-color:'+bgCor+';color:'+fgCor+';" '
var o=document.createElement('span');
var str='';
var re=new RegExp('('+flag+')', 'gi');
if(url){
str=text.replace(re, '<a href="'+url+
'$1"'+style+'>$1</a>'); //这里是给关键字加链接，红色的$1是指上面链接地址后的具体参数。
} else {
str=text.replace(re, '<span '+style+'>$1</span>'); //不加链接时显示
}
o.innerHTML=str;
return o;
}
function fRndCor(under, over){
if(arguments.length==1){
var over=under;
under=0;
}else if(arguments.length==0){
var under=0;
var over=255;
}
var r=fRandomBy(under, over).toString(16);
r=padNum(r, r, 2);
var g=fRandomBy(under, over).toString(16);
g=padNum(g, g, 2);
var b=fRandomBy(under, over).toString(16);
b=padNum(b, b, 2);
//defaultStatus=r+' '+g+' '+b
return '#'+r+g+b;
function fRandomBy(under, over){
switch(arguments.length){
case 1: return parseInt(Math.random()*under+1);
case 2: return parseInt(Math.random()*(over-under+1) + under);
default: return 0;
}
}
function padNum(str, num, len){
var temp=''
for(var i=0; i<len;temp+=num, i++);
return temp=(temp+=str).substr(temp.length-len);
}
}
}
fHl(document.body, '高亮'); //对页面body的区域中的“高亮”文字背景着色
给你推荐通过jquery来实现高亮关键词。jquery.textSearch-1.0.js代码：
(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 = "class='"+sets.markClass+"'";
}else{
clStr = "style='color:"+sets.markColor+";'";
}
//对前一次高亮处理的文字还原
$("span[rel='mark']").removeAttr("class").removeAttr("style").removeAttr("rel");
//字符串正则表达式关键字转化
$.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();
});
};
})(jQuery);
使用方法是textSearch，具体为：$(选择器). textSearch(String,可选参数)。例如，
$("body").textSearch("世界杯");
表示的含义就是查询并红色高亮标注body标签下的所有的“世界杯”这个关键字，也就是页面下高亮标注所有的“世界杯”文字。又如：
$(".test").textSearch("空姐 凤姐 芙蓉姐",{markColor: "blue"});
则表示class中有test样式的所有标签下的“空姐”，“凤姐”，“芙蓉姐”文字用蓝色高亮标注。
详细用法请参考：http://www.zhangxinxu.com/wordpress/?p=888
经过修改后测试这个高亮很好用，分享给你
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="markcxz">
<title>js标记高亮关键词演示</title>
<style type="text/css">
body{
margin:0px 5px 0px 5px; font-size:12px; line-height:140%;
text-align:center;
}
.highlight {
background-color:#ff0; color:#000;
}
.ComandBar{
width:700px; height:30px;text-align:left; margin:20px 0px 0px 0px;
background-color:#eee; text-indent:10px; padding-top:3px;
border-bottom:1px #666 dashed;
}
.ComandBar input{
border:1px #333 groove; margin:0px;
}
.ComandBar span{
cursor:pointer; border:1px #333 solid; padding:2px 5px 0px 5px;
}
#ArticleWrapper{
width:700px; text-align:left;
}
#ArticleWrapper li{
list-style-type:decimal; margin:5px 0px 10px 0px;
}
h1.title { font-size: 1.2em; background: #f5f5f5; padding-left: 0.2em; line-height: 2em; text-align:center;}
p{
text-indent:2em;
}
</style>
<script type="text/javascript">
/*----------------------------------------*
* 使用 js 标记高亮关键词 by markcxz(markcxz@aol.com)
* 参数说明:
* obj: 对象, 要进行高亮显示的html标签节点.
* hlWords: 字符串, 要进行高亮的关键词词, 使用 竖杠(|)或空格 分隔多个词 .
* cssClass: 字符串, 定义关键词突出显示风格的css伪类.
* 参考资料: javascript HTML DOM 高亮显示页面特定字词 By shawl.qiu
*----------------------------------------*/
function MarkHighLight(obj,hlWords,cssClass){
hlWords=AnalyzeHighLightWords(hlWords);
if(obj==null || hlWords.length==0)
return;
if(cssClass==null)
cssClass="highlight";
MarkHighLightCore(obj,hlWords);
//------------执行高亮标记的核心方法----------------------------
function MarkHighLightCore(obj,keyWords){
var re=new RegExp(keyWords, "i");
for(var i=0; i<obj.childNodes.length; i++){
var childObj=obj.childNodes[i];
if(childObj.nodeType==3){
if(childObj.data.search(re)==-1)continue;
var reResult=new RegExp("("+keyWords+")", "gi");
var objResult=document.createElement("span");
objResult.innerHTML=childObj.data.replace(reResult,"<span class='"+cssClass+"'>$1</span>");
if(childObj.data==objResult.childNodes[0].innerHTML) continue;
obj.replaceChild(objResult,childObj);
}else if(childObj.nodeType==1){
MarkHighLightCore(childObj,keyWords);
}
}
}
//----------分析关键词----------------------
function AnalyzeHighLightWords(hlWords)
{
if(hlWords==null) return "";
hlWords=hlWords.replace(/s+/g,"|").replace(/|+/g,"|");
hlWords=hlWords.replace(/(^|*)|(|*$)/g, "");
if(hlWords.length==0) return "";
var wordsArr=hlWords.split("|");
if(wordsArr.length>1){
var resultArr=BubbleSort(wordsArr);
var result="";
for(var i=0;i<resultArr.length;i++){
result=result+"|"+resultArr[i];
}
return result.replace(/(^|*)|(|*$)/g, "");
}else{
return hlWords;
}
}
//-----利用冒泡排序法把长的关键词放前面-----
function BubbleSort(arr){
var temp, exchange;
for(var i=0;i<arr.length;i++){
exchange=false;
for(var j=arr.length-2;j>=i;j--){
if((arr[j+1].length)>(arr[j]).length){
temp=arr[j+1]; arr[j+1]=arr[j]; arr[j]=temp;
exchange=true;
}
}
if(!exchange)break;
}
return arr;
}
}
//----------------end------------------------
function MarkHighLightDemo(){
var txtObj=document.getElementById("txtInput");
var divObj=document.getElementById("ArticleWrapper");
MarkHighLight(divObj,txtObj.value);
}
</script>
</head>
<body>
<div class="ComandBar">
标记高亮的关键词（超过一个可用竖杠(|)或空格分隔）
<input name="txtInput" id="txtInput" type="text" />
<span onclick="MarkHighLightDemo()" >标记高亮</span>
</div>
<div id="ArticleWrapper">
<p>简单来说，人们想象当中认为的判断高雅和庸俗的审美标准，实际上并不存在，所谓“高雅音乐”和“庸俗音乐”的划分根本就是错误的，他们只是满足受众不同偏好的产品而已。</p>
<p>虽然音乐本身没有高雅和庸俗的区别，但歌词和意向上却存在高尚与卑下，网络歌曲中确实大量存在以侮辱人格和打情色擦边球等方式博出位的内容，诸如“那一夜你没有拒绝我”和“终于你做了别人的小三”等歌词不断的刷新作者和受众的下限，对此做出道德判断并非没有意义，谭晶也提到，在上榜的爱情歌曲中，大部分是无病呻吟、苍白空洞的东西，有的甚至鼓吹快餐式爱情、买卖式爱情，如果她的道德批判止步于此，其实并无问题。</p>
<p>但她还指出，爱情歌曲占93%，公益歌曲、励志歌曲占7%，弘扬爱国主义精神的歌曲一首都没有，并将此作为艺术作品格调低下的证明，这种批评就十分错误。《诗经》分为风雅颂，风是各地民歌，雅为京畿之音，颂是庙堂祭祀之曲，颂和雅属于上层音乐，“十五国风”都很俚俗。可是恰恰是那些被视为俗的国风，比雅颂拥有更长久的生命力。此外，爱国或者爱政府、爱人民，也并不比爱一个具体的人在道德上更高尚，这应该是一个常识</p>
<h1 class="title"> </h1><div>
<br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</body>
</html>
我也补充一个吧
function HighlightText(obj,keyword,Kstyle){
if (Kstyle){
for ( var i=0;i<keyword.length;i++){
var reg = new RegExp(keyword[i]+ "(?=[^<>]*<)" , "ig" );
var data=document.getElementById(obj).innerHTML;
document.getElementById(obj).innerHTML=data.replace(reg,'<span style="' +Kstyle+ '">' +keyword[i]+ '</span>' );
}
}
}