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

本文介绍了一种在HTML内容中进行关键词检索并高亮显示的方法。通过JavaScript实现,支持多关键字检索,并详细展示了如何处理HTML标签以确保正确匹配与高亮。特别提到在KindEditor等富文本编辑器中应用该方法的注意事项。

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

此方法传入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.youkuaiyun.com/chenleixing/article/details/45216675

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值