javascript: mettre en surbrillance des mots dans un contenu html

Avec l'arrivée du HTML5, de nouvelles balises ont fait leur apparition.

Pour la mise en surbrillance de mots/textes dans un contenu html, il existe dorénavant la balise <mark>

Voici une fonction javascript (jquery) qui permet de modifier le contenu html afin d'y insérer ces fameuses balises <mark>

        function searchKeyword(keyword){
            var content = $("#content").html();
            var re = new RegExp(keyword, "gi");
            var new_content = content.replace(re, "<mark>" + keyword + "</mark>");
            $("#content").html(new_content);
        }

Cette fonction prend en paramètre le mot clé à mettre en surbrillance.
Une nouvelle expression Regex est créée avec le mot clé et les paramètres "g" pour une recherche globale, et "i" pour une recherche ignorant la casse.
La méthode "replace" utilise la regex afin d'y insérer la nouvelle balise <mark>

Exécution de la fonction avec un mot clé ou une liste de mots clé

        $( document ).ready(function() {
            // avec un mot clé
            searchKeyword("foo");
            // avec une liste de mots clé
            var keywords = "foo bar baz qux quux corge grault".split(" ");
            keywords.forEach(searchKeyword);
        });

 

Ajouter un commentaire

Filtered HTML

  • Les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement.
  • Tags HTML autorisés : <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Les lignes et les paragraphes vont à la ligne automatiquement.

Plain text

  • Aucune balise HTML autorisée.
  • Les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement.
  • Les lignes et les paragraphes vont à la ligne automatiquement.
CAPTCHA
Cette question permet de s'assurer que vous êtes un utilisateur humain et non un logiciel automatisé de pollupostage.
CAPTCHA visuel
Entrez les caractères (sans espace) affichés dans l'image.