关键字检索高亮标出-javasript/jQuery代码实现

此方法传入2个参数,一个是被检索内容所在的表单或者HTML元素的ID,另一为关键字,多个关键字的话,以空格隔开,下边直接上代码分享给大家:

/*关键词检索高亮标出
 *param idHtmlContent 需要检索的HTML内容ID
 *param keyword 关键字,多个以空格隔开
 */
function keywordHighlight(idHtmlContent,keyword) {
	var content= $("#"+idHtmlContent).html();//获取内容
	if ($.trim(keyword)==""){
		return;//关键字为空则返回
	}
	var htmlReg = new RegExp("\<.*?\>", "i");
	var arrA = new Array();
	//替换HTML标签
	for (var i = 0; true; i++) {
		var m = htmlReg.exec(content);
		if (m) {
			arrA[i] = m;
		}else {
			break;
		}
		content = content.replace(m, "{[(" + i + ")]}");
	}
	words = unescape(keyword.replace(/\+/g, ' ')).split(/\s+/);
	//替换关键字
	for (w = 0; w < words.length; w++) {
		var r = new RegExp("(" + words[w].replace(/[(){}.+*?^$|\\\[\]]/g, "\\$&") + ")", "ig");
		content = content.replace(r, "<b><span style='color:red;font-size:14px;'><u>"+words[w]+"</u></span></b>");//关键字样式
	}
	//恢复HTML标签
	for (var i = 0; i < arrA.length; i++) {
		content = content.replace("{[(" + i + ")]}", arrA[i]);
	}
	 $("#"+idHtmlContent).html(content);
}

效果:

注意,如果你是获取的js网页编辑器里的内容,直接传入textarea的ID是不行的,结果是改变了但是样式是显示不出来的,最后的代码应该像这样:

 var obj = KindEditor.create('textarea[id="' + containerId + '"]', config);
 obj.html(改变后的内容);

代码里设计到正则表达式的使用问题,如果你不是很熟悉的话,可以看看我的2篇有关博文:JavaScript、Java正则表达式详解java用正则表达式过滤特殊字符

转载请注明—作者:Java我人生(陈磊兴)   原文出处:http://blog.csdn.net/chenleixing/article/details/45216675

最后,认真看过的网友们,大神们,如有感觉我这个程序猿有哪个地方说的不对或者不妥或者你有很好的提议或者建议或点子方法,还望您大恩大德施舍n秒的时间留下你的宝贵文字(留言),以便你,我,还有广大的程序猿们更快地成长与进步......

时间: 2024-11-05 12:27:39

关键字检索高亮标出-javasript/jQuery代码实现的相关文章

纯客户端页面关键字搜索高亮jQuery插件

一.效果抢鲜展示 此插件是我今天下午写的,为了直观地看到是个什么东东,先展示效果,您可以狠狠地点击这里:搜索页面文字jQuery插件Demo 下图为Demo页面的两个测试截图 – 测试页面HTML代码取自豆瓣网帮助页面: 下载 您可以狠狠地点击这里:jquery.textSearch-1.0.js 文件较小,功能简单,恕不打包~~ 二.功能简述 从上图也应该看出来了,就是对HTML页面上的文字内容进行高亮标记,这个可以用在内容搜索上.纯粹的客户端程序,与后台一点瓜葛都没有. 三.如何使用 使用方

jQuery实现的鼠标悬浮链接弹出跟随图片代码

jQuery实现的鼠标悬浮链接弹出跟随图片代码:本章节介绍一下一种比较常用的效果,那就是当鼠标滑过链接的时候,能够出现跟随鼠标指针移动的图层,在实际应用中,一般是对于链接的一些说明文字或者图片等等,下面是代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.so

jQuery实现的关闭页面弹出提示实例代码

jQuery实现的关闭页面弹出提示实例代码:当要关闭当前页面的时候,如果能够弹出一个提示那算是一个相当人性化的举措,因为可以防止误操作,当然也会因人而异,因为有些浏览者会感觉比较麻烦,不管怎么说,确实有这样的需求,下面就分享一下具有这个功能的代码.代码实例如下: $(window).bind('beforeunload',function(){ return '确定要离开当前页面吗'; }); 以上代码当在刷新或者关闭浏览器页面的时候会弹出提示.浏览器兼容性:1.谷歌浏览器效果良好.2.火狐浏览

JQuery根据关键字检索html元素并筛选显示

背景:标题比较唬人,实际上就是在文本框中输入关键字,通过关键字检索html元素,筛选后显示在界面上. Html元素如下: <div> <input type="text" id="searchBox"/> <ul id="dataSet"> <li>刘德华</li> <li>黄日华</li> <li>张学友</li> <li>谢

基于jQuery+CSS3点击动画弹出表单代码

分享一款基于jQuery+CSS3点击动画弹出表单代码是一款鼠标点击图标按钮动画弹出表单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="buttonCollection"> <div class="qutton" id="qutton_upload"> <div class="qutton_dialog" id="uploadDial

如何书写高质量的jQuery代码(转)

想必大家对于jQuery这个最流行的javascript类库都不陌 生,而且只要是前端开发人员肯定或多或少的使用或者接触过,在今天的这篇文章中,参考了一些资料及实际使用效率,将介绍一些书写高质量jQuery代码的 原则,不单单会告诉你如何去书写,也会告诉你为什么这样书写,希望大家会觉得有所帮助. 注意定义jQuery变量的时候添加var关键字 这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下: $loading = $('#loading'); //

如何书写高质量jQuery代码(使用jquery性能问题)

1.正确引用jQuery 1.尽量在body结束前才引入jQuery,而不是在head中.2.借助第三方提供的CDN来引入jQuery,同时注意当使用第三方CDN出现问题时,要引入本地的jQuery文件.(对于已经使用了cdn的网站可以忽略,现在用户带宽都升级了,这个可以忽略了,放别人机器不一定稳定)3.如果在</body>前引入script文件的话,就不用写document.ready了,因为这时执行js代码时DOM已经加载完毕了. ? 1 2 3 4 <body>  <s

如何书写高质量的jQuery代码

想必大家对于jQuery这个最流行的javascript类库都不陌生,而且只要是前端开发人员肯定或多或少的使用或者接触过,在今天的这篇文章中,我们将介绍一些书写高质量jQuery代码的原则,我们不单单会告诉你如何去书写,也会告诉你为什么这样书写,希望大家会觉得有所帮助. 注意定义jQuery变量的时候添加var关键字 这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下: 1 $loading = $('#loading'); //这个是全局定义,不知道

用lucene.net根据关键字检索本地word文档

目前在做一个winform小软件,其中有一个功能是能根据关键字检索本地保存的word文档.第一次是用com读取word方式(见上一篇文章),先遍历文件夹下的word文档,读取每个文档时循环关键字查找,结果可想而知效率很慢.检索结果是一条接一条显示出来的o(>_<)o ~~.连菜鸟级别的自己看到这效率都觉得很无语.然后想到计算机的本地搜索及google,百度搜索引擎,它们能做到在海量文件中快速搜到匹配某些关键字的文件,应该是运用其它比较先进成熟的技术来实现.于是上网搜了好多资料,发现有一种叫lu