JavaScript/JQueryのライブ検索でハイライト機能を実装する

Question

私はlivesearchのハイライト機能を実装しようとしています。

私が行うことは、ユーザーが探しているトークンを含むajaxリクエストを送信することです。私はテーブルを含むhtmlテキストを受け取ります。

私は単純な正規表現を使用してユーザートークンを探してスパンで囲むことができたと思っていましたが、長すぎる<a> - タグを受け取っています。そのため、ユーザーは何か入力して、タグ内の何かを置き換えることによってHTML。

どうすれば検索でhtmlタグを除外できますか？

私はjavascript regexpを使用しています。それ以外の場合は必要な要素のセレクターを使用し、

var words = "keyword1,keyword2,keyword3"; 
var keywords = words.split(','); 
for(var i = 0; i < keywords.length; i++) { 
    $(selector).highlight($.trim(keywords[i])); 
} 

あなたたいが、ページ全体でハイライト表示なければ、'body'とselectorを置き換える：

Answer 1

あなたはjQuery highlightプラグインをロードする必要があり、その後、あなたはちょうどこのような何かを行うことができます。

Answer 2

//These results to be highlighted 
var results = []; 
results[0] = 'jquery'; 
results[1] = 'json'; 
results[2] = 'Java Script'; 
results[3] = 'java'; 
results[4] = 'java Update'; 
results[5] = 'javelin'; 
results[6] = 'James'; 
results[7] = 'jacob'; 
results[8] = 'Jail'; 
results[9] = 'Jailor'; 

jQuery(document).ready(function(){ 
    //Search the results 
    jQuery('#search').live('keyup', function(event){ 
     var term = jQuery(this).val();//keyword to be matched 
     var htm = ''; 

     //Keys with codes 40 and below are special (enter, arrow keys, escape, etc.), Key code 8 is backspace. 
     if(event.keyCode > 40 || event.keyCode <91 || event.keyCode == 8 || 
      event.keyCode == 20 || event.keyCode == 16 || event.keyCode == 9 || 
      event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || 
      event.keyCode == 40) { 
      for(x in results){ 
       var match = results[x]; 
       if(match.toLowerCase().indexOf(term.toLowerCase()) != -1){ 
        var o = '<b><u>'+term+'</u></b>'; 
        var a = match.replace(term, o); 
        htm += '<li>'+a+'</li>'; 
       } 
      } 
      //create a orderd list for the matched results 
      var output = '<ol>' + htm + '</ol>'; 
      if (htm.length > 0) { 
       jQuery('#result').show().append(output); 
      } 
     } 
    }); 
}); 

完全なチュートリアルでは、ここで見つけることができます：http://www.webspeaks.in/2012/09/live-text-search-highlight-using.html

Answer 3

ないjQueryプラグインがどのように機能するかをよく確認してください、ここで私が思い付いたが、複数のタグの上にテキストをハイライト表示しないスクリプトがあります。 "my script"を強調表示し、htmlが "my script"のように見える場合、強調表示されません。まだその部分に取り組んでいます。ここで

は、これまでのスクリプトです：

str='<img src="brown fox.jpg" title="The brown fox" />' 
    +'<p>some text containing fox. And onother fox.</p>' 
var word="fox"; 
word="(\\b"+ 
    word.replace(/([{}()[\]\\.?*+^$|=!:~-])/g, "\\$1") 
     + "\\b)"; 
var r = new RegExp(word,"igm") 
str.replace(/(>[^<]+)/igm,function(a){ 
    return a.replace(r,"<span class='hl'>$1</span>"); 
})