jQuery文本突出显示 - 多个亮点

时间:2012-09-13 15:10:19

标签: javascript jquery find highlight

使用Johann Burkard编写的插件突出显示文本字符串:

Higlighting jQuery Plugin

我稍微修改了这个以接受来自两个输入字段的值,这些字段将在运行该函数时突出显示,但插件只允许使用一种颜色。有没有人知道如果有扩展或知道我可以进一步扩展这种方式以接受不同的突出显示颜色?

我的代码:

$(function() { 
if ( $("input#searchterm").val().length > 0 ) {
    var arrayOfKeyWords= $("input#searchterm").val().split(',');
    for (var i=0;i<arrayOfKeyWords.length;i++) {
        $('.message p.messagecontent').highlight(arrayOfKeyWords[i]);
    }
}   
if ( $("input#anysearchterm").val().length > 0 ) {
    var arrayOfKeyWords= $("input#anysearchterm").val().split(',');
    for (var i=0;i<arrayOfKeyWords.length;i++) {
        $('.message p.messagecontent').highlight(arrayOfKeyWords[i]);
    }
}       
});

这很好用并在我想要突出显示的字符串周围添加一个css类,所以我的问题是可以指定将在我的各个函数中包裹文本的类名,这样我就可以在CSS中设置颜色了?

插件来源:

jQuery.fn.highlight=function(b){function a(e,j){var l=0;if(e.nodeType==3){var k=e.data.toUpperCase().indexOf(j);if(k>=0){var h=document.createElement("span");h.className="highlight";var f=e.splitText(k);var c=f.splitText(j.length);var d=f.cloneNode(true);h.appendChild(d);f.parentNode.replaceChild(h,f);l=1}}else{if(e.nodeType==1&&e.childNodes&&!/(script|style)/i.test(e.tagName)){for(var g=0;g<e.childNodes.length;++g){g+=a(e.childNodes[g],j)}}}return l}return this.each(function(){a(this,b.toUpperCase())})};jQuery.fn.removeHighlight=function(){return this.find("span.highlight").each(function(){this.parentNode.firstChild.nodeName;with(this.parentNode){replaceChild(this.firstChild,this);normalize()}}).end()};

提前致谢

0 个答案:

没有答案