Implementazione di una funzione di evidenziazione per una ricerca live in JavaScript/JQuery

Question

Sto tentando di implementare una funzione di evidenziazione per una ricerca di vita.

Quello che faccio è inviare una richiesta Ajax con un token che l'utente cerca. Ricevo un testo html contenente una tabella.

Quindi ho pensato di utilizzare una semplice espressione regolare, cercando il token dell'utente e quindi lo circondano con una span, ma ricevo alcuni longfilled <a> - Tag, quindi è probabile che l'utente digiti qualcosa e io interrompo HTML sostituendo qualcosa all'interno di un tag.

Quindi, come posso escludere i tag html nella mia ricerca?

Oh sto usando javascript regexp.

Answer 1

Si avrebbe bisogno di caricare jQuery highlight plug-in e quindi si può solo fare qualcosa di simile:

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

Se vuoi fare evidenziando in tutta la pagina, quindi sostituire selector con 'body', altrimenti utilizzare il selettore per l'elemento desiderato .

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

Il tutorial completo può essere trovato qui: http://www.webspeaks.in/2012/09/live-text-search-highlight-using.html

Answer 3

Non so quanto bene funziona il plugin jQuery, qui è la sceneggiatura mi è venuta, ma non mette in evidenza il testo su più tag. Se voglio evidenziare "il mio script" e l'html sembra "il mio script", allora non sarebbe evidenziato. Sto ancora lavorando a quella parte.

Ecco lo script finora:

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