使用JS给搜索结果加亮(基于JQuery)-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_9118/article/details/81789420

本文介绍了一个基于JQuery框架的关键词高亮显示方法。通过定义XP_Highlight类及其formatKeyword方法实现对指定元素内的关键词进行加亮处理。用户只需引入JQuery库，并设置好关键词数组即可使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在网上找了一找，然后稍做修改，忘了告诉你是基于JQuery框架之上，所以你在用的时候，先引入JQuery库文件。
下面是代码：

<script type="text/javascript">

function XP_Highlight()
{
this.KeyWords = null;

// 格式化关键词
this.formatKeyword = function(content, keyword)
{
keyword = keyword.replace(/(^\s*)|(\s*$)/g, “”);
if(keyword == ”)
return content;
var reg = new RegExp(’('+keyword+’)', ‘gi’);
return content.replace(reg, ‘<i>$1</i>’);
}

// 重绘内容区域
this.refreshContent = function(contentID)
{
var content = $(contentID).html();
for(var i = 0; i < keywords.length; i ++)
{
var strKey = keywords[i].toString();
var arrKey = strKey.split(’，’);
for(var j = 0; j < arrKey.length; j ++)
{
var key = arrKey[j];
content = this.formatKeyword(content, key);
}
}
$(contentID).html(content) ;
}
}

var keywords =
[
['{$keywords}']
];

$(document).ready(function(){
var hl = new XP_Highlight();
hl.keywords = keywords;
hl.refreshContent(’#main’);
});

</script>

其是keywords是你搜索的关键字。

下面是加亮的样式，你可以自行修改。
em { font-size:small; color:#fff; background-color:#FF0000; font-style:normal; }