Mise en œuvre d'une fonctionnalité de surbrillance pour une recherche en direct dans JavaScript / JQuery

J'essaie d'implémenter une fonctionnalité de mise en évidence pour une recherche de vie.

Ce que je fais, envoyez une requête ajax avec un jeton que l'utilisateur recherche. Je reçois un texte html contenant une table.

Je pensais donc que je pourrais utiliser un simple regex, à la recherche d'un jeton d'utilisateurs, puis l'entourer d'un intervalle, mais je reçois des tags <a> – longfilled, alors il est probable que l'utilisateur tape quelque chose et je brise mon HTML par En remplaçant quelque chose par une étiquette.

Alors, comment puis-je exclure des balises html dans ma recherche?

Oh, j'utilise JavaScript regexp.

Vous devriez charger le plugin de mise en évidence jQuery et vous pouvez simplement faire quelque chose comme ceci:

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

Si vous voulez mettre en surbrillance sur la page entière, remplacez le selector par 'body' , sinon utilisez le sélecteur pour l'élément souhaité.

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

Le didacticiel complet se trouve ici: http://www.webspeaks.in/2012/09/live-text-search-highlight-using.html

Vous ne savez pas à quel point le plugin jQuery fonctionne, voici le script que j'ai créé, mais ne met pas en surbrillance le texte sur plusieurs balises. Si je veux mettre en surbrillance "mon script" et que le html ressemble à "mon script", il ne serait pas mis en surbrillance. Toujours en train de travailler sur cette partie.

Voici le script jusqu'à présent:

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