3

Johann Burkard によって作成されたプラグインを使用して、テキストの文字列を強調表示します。

jQuery プラグインの強調表示

関数の実行時に強調表示される 2 つの入力フィールドからの値を受け入れるようにこれを少し変更しましたが、プラグインでは 1 つの色しか使用できません。拡張機能があるかどうか、またはこれをさらに拡張して別のハイライト色を受け入れる方法を知っている人はいますか?

これのための私のコード:

$(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()};

前もって感謝します

4

0 に答える 0