Triển khai tính năng nổi bật cho tìm kiếm trực tiếp trong JavaScript/JQuery

Question

Tôi đang cố gắng triển khai tính năng tô sáng cho tìm kiếm cuộc sống.

Điều tôi làm là gửi yêu cầu ajax bằng mã thông báo mà người dùng tìm kiếm. Tôi nhận được một văn bản html có chứa một bảng. Vì vậy, tôi nghĩ rằng tôi có thể sử dụng một regex đơn giản, tìm kiếm mã thông báo người dùng và sau đó bao quanh nó với một khoảng, nhưng tôi nhận được một số longfilled <a> - Thẻ, vì vậy rất có thể là người dùng gõ một cái gì đó và tôi phá vỡ của tôi HTML bằng cách thay thế thứ gì đó bên trong thẻ.

Vậy làm cách nào để loại trừ các thẻ html trong tìm kiếm của tôi?

Tôi đang sử dụng regexp javascript.

Answer 1

Bạn sẽ cần phải tải jQuery highlight plugin và sau đó bạn chỉ có thể làm một cái gì đó như thế này:

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

Nếu bạn muốn làm nổi bật trong toàn bộ trang, sau đó thay thế selector với 'body', nếu không sử dụng bộ chọn cho phần tử mong muốn .

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

hoàn chỉnh hướng dẫn có thể được tìm thấy ở đây: http://www.webspeaks.in/2012/09/live-text-search-highlight-using.html

Answer 3

Không chắc như thế nào các plugin jQuery hoạt động, đây là kịch bản tôi đã đưa ra nhưng không làm nổi bật văn bản trên nhiều thẻ. Nếu tôi muốn đánh dấu "tập lệnh của tôi" và html trông giống như "tập lệnh của tôi" thì nó sẽ không được đánh dấu. Vẫn đang làm việc trên phần đó.

Đây là tập lệnh cho đến thời điểm này:

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