jQueryハイライトスクリプトを調整する

Question

次のjQueryプラグインを使用して、クエリキーワードを文字列で強調表示しています。それは、文字列内に見つかった各クエリキーワードを正確に強調表示しますが、正確に一致するものだけでなく、キーワードが長い単語の一部である場合も同様です。

ユーザがクエリを入力した場合など。 "私は人間です"私は文字列内のすべてのiとaを強調表示しないようにしたいと思います。単語全体にマッチするならば、このスクリプトを微調整して3文字未満の単語だけを強調表示させるにはどうすればよいですか？ I.d.ハイライト表示タグが文字列"I am a humanoid"<b>で、キーワードはI am a humanある場合、関数は出力になります。現在

"<b>I</b> <b>am</b> <b>a</b> <b>human</b>oid"

の代わりには：

"<b>I</b> <b>am</b> <b>a</b> <b>human</b>o<b>i</b>d"

jQuery.fn.highlight = function(pat) { 
function innerHighlight(node, pat) { 
    var skip = 0; 
    if (node.nodeType == 3) { 
    var pos = node.data.toUpperCase().indexOf(pat); 
    if (pos >= 0) { 
    var spannode = document.createElement('span'); 
    spannode.className = 'highlight'; 
    var middlebit = node.splitText(pos); 
    var endbit = middlebit.splitText(pat.length); 
    var middleclone = middlebit.cloneNode(true); 
    spannode.appendChild(middleclone); 
    middlebit.parentNode.replaceChild(spannode, middlebit); 
    skip = 1; 
    } 
    } 
    else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) { 
    for (var i = 0; i < node.childNodes.length; ++i) { 
    i += innerHighlight(node.childNodes[i], pat); 
    } 
    } 
    return skip; 
} 
return this.each(function() { 
    innerHighlight(this, pat.toUpperCase()); 
}); 
}; 

Answer 1

私が改正されていませんそのプラグインは誰かに属しており、私はその権利をチェックしていませんが、おそらく修正するのは自由ですが。代わりに私はあなたのための関数を作成しました。あなたが傾きがある場合は、簡単にプラグインに変えることができます。

検索語が3文字以下の場合、一致する単語のみが強調表示されます。それ以外の場合は、単語の任意の部分を強調表示します。

function highlight(original, searchterms) { 
    var terms = searchterms.split(" "); 
    var output = original; 

    for (var i = 0; i < terms.length; i++) { 
     var term = terms[i]; 
     if (term.length <= 3) { 
      // replace whole word only 
      var re = new RegExp("\\b" + term + "\\b", "gi"); 
      output = output.replace(re, "<span class=\"highlight\">" + term + "</span>"); 
     } 
     else { 
      // replace any part of word 
      var re = new RegExp(term, "gi"); 
      output = output.replace(re , "<span class=\"highlight\">" + term + "</span>"); 
     } 
    } 

    return output; 
} 

ここではデモのカップルを扱うことを示すフィドルです：http://jsfiddle.net/XNMzg/2/