`
guyinglong
  • 浏览: 73923 次
  • 性别: Icon_minigender_1
  • 来自: 江西
社区版块
存档分类
最新评论

使用JS给搜索结果加亮(基于JQuery)

阅读更多
在网上找了一找,然后稍做修改,忘了告诉你是基于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; }

分享到:
评论

相关推荐

    jquery-ui-1.9.0(最新稳定版本)

    jQuery UI 是一个强大的前端开发库,它是基于 jQuery JavaScript 库构建的,提供了丰富的用户界面组件和交互效果。jQuery UI 1.9.0 是该库的一个重要版本,具有高度稳定性和优化的功能。这个版本包含了对先前版本的...

    【JQuery的UI范例模版】(自带全部源码超值放送)

    jQuery UI提供了一套完整的、易于使用的组件库,帮助开发者快速构建具有专业外观和交互性的网页应用。本资源“【jQuery的UI范例模版】”包含了丰富的示例和全部源码,为开发者提供了即用的UI设计方案,无需从零开始...

    jQuery UI工具风格主题.rar

    jQuery UI 是一个基于jQuery JavaScript库的用户界面插件集合,它提供了丰富的交互效果、可自定义的主题以及多种组件,极大地增强了网页的用户体验。本资源"jQuery UI工具风格主题.rar"显然是一个包含了jQuery UI...

    15天学会jquery, jquery 教程

    例如,在浏览设计博客时,一个基于jQuery编写的示例就让人眼前一亮,简单的代码背后隐藏着强大的功能。 **何时使用jQuery?** - 当你需要一个轻量级库来增强DOM操作能力时。 - 当你希望简化AJAX调用过程时。 - 当...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    打包50种实例的大型树形菜单控件JSTree(基于jQuery)下载 30.打包两款实用jquery+div横向滑动的下滑菜单代码(兼容性好)下载 31.非常帅jquery仿雅虎网超大菜单导航代码 32.分享jquery带阴影效果折叠菜单dropdown...

    Jquery LigerUI 中文 API

    jQuery LigerUI 是一款基于 jQuery 的前端组件库,它提供了一套完整的用户界面解决方案,适用于快速构建功能丰富的 Web 应用程序。LigerUI 包含了大量的组件,如表格、表单、对话框、下拉菜单等,大大简化了前端开发...

    jQuery UI(java)

    jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了丰富的交互效果和可自定义的主题,使得开发者能够快速构建美观、响应式的Web应用。在Java环境下,jQuery UI同样能够发挥其强大的功能,帮助...

    jQuery官方UI插件

    这些组件都是基于jQuery构建的,因此易于与其他jQuery库和功能集成,同时它们遵循WAI-ARIA标准,以提高对无障碍功能的支持。 在实际开发中,你可以根据项目需求选择性地引入jQuery UI的组件,避免不必要的性能开销...

    jquery ui jquery相关资源

    jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了丰富的交互效果、可自定义的主题以及各种用户界面组件。这个压缩包文件包含了与 jQuery 和 jQuery UI 相关的资源,很可能是用于开发 web ...

    JQuery UI 中文帮助文档.rar

    jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了丰富的交互效果、可自定义的主题以及多种组件,使得开发者能够更轻松地创建具有吸引力和功能性的Web应用。这个“JQuery UI 中文帮助文档”...

    jquery ui组件

    jQuery UI是一款基于JavaScript库jQuery的开源组件集合,它提供了丰富的用户界面功能,包括可拖动、可 Droppable、可 Resizable、可 Selectable 的元素,以及可自定义的弹出对话框、下拉菜单、日期选择器、滑块等...

    jquery-ui插件

    jQuery UI 是一个强大的开源库,它基于广泛使用的 jQuery JavaScript 库,为开发者提供了丰富的用户界面组件和交互效果。这个插件致力于提高网站和应用程序的用户体验,通过提供易于使用和定制的组件,如对话框、...

    jquery.ui by cai

    **jQuery UI 深度解析** `jQuery UI`是由jQuery团队开发...以上是基于提供的文件名对jQuery UI库的部分功能和应用场景的解析。实际应用中,开发者可以根据需求组合这些组件,创建出功能丰富、交互友好的Web应用界面。

    JqueryUi插件

    jQuery UI 是一个基于 jQuery JavaScript库的可扩展的用户界面组件集合。它提供了一系列的可交互、可自定义样式的UI组件,帮助开发者快速创建出美观且功能丰富的网页应用。这个“JqueryUi插件”主题主要涵盖了jQuery...

    前端项目-jquery-highlighttextarea.zip

    【标题】"前端项目-jquery-highlighttextarea.zip" 提供了一个基于 jQuery 的文本区域高亮插件,用于在 textarea 元素中突出显示特定的单词和句子。这个项目旨在提升用户体验,帮助用户快速定位和识别重要信息,尤其...

    jQueryUI框架

    jQueryUI框架是一个基于JavaScript库jQuery的用户界面组件集合,它为开发者提供了丰富的交互式Web界面元素,如对话框、滑块、进度条、日期选择器等。这个框架极大地简化了前端开发过程,使得构建功能丰富的、用户...

    jquery-ui-1.10.3.custom.zip

    jQuery UI 是一个基于 jQuery JavaScript 库的可扩展用户界面工具集,它提供了一系列丰富的交互式组件和视觉效果,为Web开发者提供了创建现代、功能丰富的用户界面的强大支持。在本文中,我们将详细探讨jQuery UI ...

    jquery ui 11

    jQuery UI 是一个基于 jQuery JavaScript 库的可扩展框架,它提供了丰富的交互效果、可自定义的主题、以及多种用户界面组件,使得开发者能够轻松创建功能强大的Web应用程序。在本文中,我们将详细探讨jQuery UI ...

    jqGrid表格内容查询读取代码.zip

    jqGrid是一款基于jQuery的开源JavaScript库,专门用于创建交互式的数据网格。它允许在Web页面上展示、操作和处理大量数据。在这个“jqGrid表格内容查询读取代码.zip”压缩包中,包含了实现jqGrid功能的基本文件,如...

    百度 变形金刚 脚本

    在IT行业中,JavaScript(简称JS)是一种广泛使用的脚本语言,尤其在网页开发和前端交互中扮演着核心角色。"百度 变形金刚 脚本"这个标题提及的"变形金刚",实际上可能是指百度知道平台上的一个特定功能或者特效,它...

Global site tag (gtag.js) - Google Analytics