Pourquoi utiliser une fonction de mise en évidence auto-faite est une mauvaise idée

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

• vous devez supprimer les noeuds 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 avec par exemple,innerHTML)
• si vous voulez supprimer les éléments surlignés, vous devez supprimer les éléments HTML avec leur contenu et aussi combiner les noeuds de texte fragmentés pour des recherches ultérieures. Cela est nécessaire car chaque plugin highlighter recherche des correspondances dans les noeuds de texte et si vos mots-clés sont divisés en plusieurs noeuds de texte, ils ne seront pas trouvés.
• vous auriez aussi besoin de construire des tests pour s'assurer que votre plugin fonctionne dans les situations que vous avez pas pensé. Et je parle de tests de navigation croisée!

ça a l'air compliqué? Si vous voulez certaines fonctionnalités comme ignorer certains éléments de mise en évidence, cartographie diacritique, cartographie synonymes, recherche à l'intérieur d'iframes, recherche de mots séparés, etc. cela devient de plus en plus compliqué.

utilisez un plugin existant

lorsque vous utilisez un plugin existant, bien implémenté, vous n'avez pas à vous soucier des choses nommées ci-dessus. L'article 10 jQuery sélection de texte plugins on Sitepoint compare popular highlighter plugins. Cela inclut les plugins des réponses à cette question.

regardez marquer.js

marquer.js est un plugin qui est écrit en JavaScript, 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 les mots-clés séparément à la place complet du terme
• carte de signes diacritiques (Par exemple, si "justo" doit également correspondre "justò")
• ignore corresponds inside custom elements
• utiliser l'élément Custom highlighting
• utiliser la classe custom highlighting
• carte personnalisée synonymes
• recherche aussi à l'intérieur iframes
• recevez pas trouvé termes

DEMO

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 gratuit et développé en open-source sur GitHub ( référence du projet).

Exemple de marque.mise en évidence des mots-clés 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>

Voici la mienne: 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></span>");
         page.html(newHtml);
    });

CSS:

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

fonctionne pour la recherche répétée aussi.

$(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>

(pour une chose que vous voulez utiliser la Couleur d'arrière-plan, pas de Couleur, pour le fond)

je créerais une classe css pour normal et une classe CSS distincte (héritée) pour le texte en surbrillance, puis j'utiliserais le JQuery pour changer la classe CSS lorsque vous trouvez ce que vous cherchez.

juste mes premières pensées cependant, pas sûr s'il y a une meilleure façon de le faire.

EDIT: si vous voulez changer seulement un mot spécifique, vous devrez modifier innerHTML pour le mettre dans un marque séparée à ce point.

voici un autre exemple que j'ai rapidement hacké: http://jsfiddle.net/VCJUX/