爲JavaScript/JQuery中的實時搜索實現高亮功能

我正在嘗試爲livesearch實現高亮功能。爲JavaScript/JQuery中的實時搜索實現高亮功能

我所做的是發送一個ajax請求與用戶查找的令牌。我收到一個包含表格的html文本。

所以我想我可以用一個簡單的正則表達式，尋找用戶令牌，然後用一個跨度圍繞着它，但我得到了一些longfilled <a> - 標籤，所以有很好的機會在用戶鍵入的東西，我打破我的通過替換標籤內的東西來實現HTML。

那麼如何在我的搜索中排除html標籤呢？

哦，我正在使用JavaScript的正則表達式。

2012-04-20 Johannes Klauß

你會需要加載jQuery highlight插件，那麼你可以做這樣的事情：

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

如果你想做的事在整個頁面突出，然後更換selector與'body'，否則使用選擇器所需元素。

來源

2012-04-20 23:20:43

//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

來源

2012-09-14 04:49:12

不知道的jQuery插件如何工作的，這裏是我想出了一個腳本，但並不突出在多個標籤的文本。如果我想突出顯示「我的腳本」和HTML看起來像「我的腳本」，那麼它不會被突出顯示。仍在繼續努力。

這是迄今爲止該腳本：

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>"); 
})

來源

2012-10-19 08:19:59 HMR

爲JavaScript/JQuery中的實時搜索實現高亮功能

回答

相關問題