web-dev-qa-db-fra.com

Recherche JQuery dans une page HTML statique avec mise en évidence du mot trouvé

J'ai essayé de faire une recherche simple dans une page HTML statique en utilisant JQuery. Je dois mentionner que ce n'est que la première fois que je travaille avec JQuery.

J'essaie de changer l'arrière-plan du mot trouvé dans la page et voici ce que j'ai essayé jusqu'à présent:

myJavascript.js:

$(document).ready(function(){

     $('#searchfor').keyup(function(){
         page = $('#all_text').text();
         searchedText = $('#searchfor').val();
         $("p:contains('"+searchedText+"')").css("color", "white");
    });
});

Voici également le code HTML:

page.html:

<html>
<head>
    <title>Test page</title>
</head>
<body bgcolor="#55c066">
<input type="text" id="searchfor"></input>
    <p id="all_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
    <font color="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci futurum.</font>
    </p>
</body>
    <script src="jquery-1.7.2.min.js"></script>
    <script src="myJavascript.js"></script>
</html>

Après avoir inspecté la page avec Firebug, je peux voir que les variables de JQuery obtiennent la valeur du champ de saisie, mais je suppose que je gâche la partie surlignée.

Merci d'avance pour votre aide!

jqueryhtmlcsssearchhighlight
18
Radu Gheorghiu

Faites quelque chose comme ça

 $("p:contains('"+searchedText+"')").each( function( i, element ) {
      var content = $(element).text();
      content = content.replace( searchedText, '<span class="search-found">' + searchedText + '</span>' );
      element.html( content );
 });

 .search-found {
     text-decoration: underline;
 }

p.s. cela ne fonctionnera que si chacun des "éléments" a un contenu en texte brut sinon il supprimera les nœuds enfants

EDIT: suppression du supplément ')' dans le rappel each

11
scibuff

Pourquoi utiliser une fonction de surlignage faite maison est une mauvaise idée

La raison pour laquelle c'est probablement une mauvaise idée de commencer à construire votre propre fonction de mise en évidence à partir de zéro est parce que vous rencontrerez certainement des problèmes que d'autres ont déjà résolus. Défis:

  • Vous devez supprimer des nœuds de texte avec des éléments HTML pour mettre en évidence vos correspondances sans détruire les événements DOM et déclencher la régénération DOM encore et encore (ce qui serait le cas, par exemple, de innerHTML)
  • Si vous souhaitez supprimer des éléments en surbrillance, vous devez supprimer les éléments HTML avec leur contenu et également combiner les nœuds de texte fractionnés pour d'autres recherches. Cela est nécessaire car chaque plugin de surligneur recherche des correspondances dans les nœuds de texte et si vos mots clés sont divisés en plusieurs nœuds de texte, ils ne seront pas trouvés.
  • Vous devrez également créer des tests pour vous assurer que votre plugin fonctionne dans des situations auxquelles vous n'avez pas pensé. Et je parle de tests multi-navigateurs!

Cela semble compliqué? Si vous voulez certaines fonctionnalités comme ignorer certains éléments de la mise en surbrillance, le mappage diacritique, le mappage de synonymes, la recherche dans les iframes, la recherche de mots séparés, etc. cela devient de plus en plus compliqué.

Utiliser un plugin existant

Lorsque vous utilisez un plugin existant et bien implémenté, vous n'avez pas à vous soucier des choses nommées ci-dessus. L'article 10 plugins de surligneur de texte jQuery sur Sitepoint compare les plugins de surligneur populaires. Cela inclut des plugins de réponses à cette question.

Jetez un oeil à mark.js

mark.js est un tel plugin qui est écrit en JavaScript pur, mais est également disponible en tant que plugin jQuery. Il a été développé pour offrir plus d'opportunités que les autres plugins avec des options pour:

  • rechercher des mots clés séparément au lieu du terme complet
  • carte diacritiques (par exemple, si "justo" doit également correspondre à "justò")
  • ignorer les correspondances à l'intérieur des éléments personnalisés
  • utiliser un élément de surbrillance personnalisé
  • utiliser une classe de surbrillance personnalisée
  • mapper des synonymes personnalisés
  • rechercher également à l'intérieur des iframes
  • recevoir des termes non trouvés

DÉMO

Alternativement, vous pouvez voir ce violon .

Exemple d'utilisation :

// Highlight "keyword" in the specified context
$(".context").mark("keyword");

// Highlight the custom regular expression in the specified context
$(".context").markRegExp(/Lorem/gmi);

C'est open-source gratuit et développé sur GitHub ( référence du projet ).

Exemple de surlignage par mot-clé mark.js avec votre code

$(function() {
  $("input").on("input.highlight", function() {
    // Determine specified search term
    var searchTerm = $(this).val();
    // Highlight search term inside a specific context
    $("#context").unmark().mark(searchTerm);
  }).trigger("input.highlight").focus();
});
mark {
  background: orange;
  color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script>
<input type="text" value="test">
<div id="context">
  Lorem ipsum dolor test sit amet
</div>
21
dude

Voici le mien: http://jsfiddle.net/x8rpY/1/

JS:

$('#searchfor').keyup(function(){
         var page = $('#all_text');
         var pageText = page.text().replace("<span>","").replace("</span>");
         var searchedText = $('#searchfor').val();
         var theRegEx = new RegExp("("+searchedText+")", "igm");    
         var newHtml = pageText.replace(theRegEx ,"<span>$1</span>");
         page.html(newHtml);
    });

CSS:

#all_text span
{
    text-decoration:underline;
    background-color:yellow;    
}

Fonctionne également pour les recherches répétées.

9
mshsayem
$(function() {
  $("input").on("input.highlight", function() {
    // Determine specified search term
    var searchTerm = $(this).val();
    // Highlight search term inside a specific context
    $("#context").unmark().mark(searchTerm);
  }).trigger("input.highlight").focus();
});
mark {
  background: orange;
  color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script>
<input type="text" value="test">
<div id="context">
  Lorem ipsum dolor test sit amet
</div>
3
Rajan