您的位置：首页 > Web前端 > JQuery

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

2015-04-23 08:44 344 查看

此方法传入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秒的时间留下你的宝贵文字（留言），以便你，我，还有广大的程序猿们更快地成长与进步......

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 检索关键字 javascriptjquery 高亮显示关键字文章关键字高亮显示检索文章关键字

相关文章推荐

新的分享

章节导航