首页 > jQuery实现搜索结果关键字高亮显示

jQuery实现搜索结果关键字高亮显示

很多网站的搜索结构页面,都会将搜到的关键字高亮显示。似乎是在关键字外围包裹一个标签如<em class="highlight">hello</em>,那么,这个关键词用jQuery该如何匹配到呢?


是个比较复杂的问题,可以找jquery插件,提供一个我修复过的插件,这个插件我也找不到原版了,而且代码都是压缩了的,好在还简单,如果要修改的话也不复杂
http://jsfiddle.net/UWH7K/


高亮的文字的jQuery对象可以通过

$("span[rel='mark']")

获取。
然后使用textSearch,具体为:

$(选择器). textSearch(String,可选参数)

用JS将文本中某些关键字wrap一个标签是很容易的事情,有几位同学都提供了答案。
回到问题本身,你应该不是要知道怎么用JS包装标签,而是要知道怎么高亮,方法有多种,根据你不同的业务场景选择。
1. 一般简单的搜索结果页的高亮标签用JS在客户处理,没有问题。比如wordpress的一些高亮插件;
2. 运用分词技术进行搜索的,比如,我在Google搜索“美国人民生活在水深火热中”,我得到的第一条搜索结果

这样的结果,采用JS处理显然不太合适,关键问题,你不知道“美国人民”是被分成了"美国",“美国人”还是“美国人民”,所以一般都会在处理分词的时候来高亮,或者告诉你怎么高亮,你可以去了解了解Lucene


这样的效果早已有现在的jQuery扩展了,匹配链接中的文字也是妥妥的。

【热门文章】
【热门文章】