Mettez en surbrillance le texte à l'intérieur de html avec jQuery

Je cherche à faire quelque chose de similaire à ce plugin http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

Mais le problème je suis confronté est que le plugin ne permet pas de mettre des mots en surbrillance dans le html.

Donc, si vous êtes à la recherche pour my text

à l'intérieur du html comme

this is <a href="#">my</a> text that needs highlighting

Vous n'obtiendrez pas de toute évidence.

Est-il un moyen de mettre du texte en surbrillance tout en ignorant les balises html entre les deux?

source d'informationauteur Mike

  1. 7

    J'ai bricolé quelques RegEx qui permet de balises HTML à la position d'espaces caractères: 

    <div id="test">this is <a href="#">my</a> text that needs highlighting</div>

    JavaScript:

    var src_str = $("#test").html();
var term = "my text";
term = term.replace(/(\s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
var pattern = new RegExp("("+term+")", "i");

src_str = src_str.replace(pattern, "<mark>$1</mark>");
src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/,"$1</mark>$2<mark>$4");

$("#test").html(src_str);

    Essayer ici: http://jsfiddle.net/UPs3V/

  2. 2

    Je voudrais laisser un commentaire, mais la pile ne permet pas de moi ou je n'arrive pas à trouver un bouton pour elle, et donc d'avoir à le faire dans une réponse.
    Il y a un problème avec le script.
    par exemple:
    Soulignant renard dans la chaîne suivante:

    <img src="brown fox.jpg" title="The brown fox" /><p>some text containing fox.</p>

    De casser la balise img:

    var term = "fox";
term = term.replace(/(\s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
var pattern = new RegExp("("+term+")", "i");
src_str ='<img src="brown fox.jpg" title="The brown fox" />'
    +'<p>some text containing fox.</p>'
src_str = src_str.replace(pattern, "<mark>$1</mark>");
src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/,"$1</mark>$2<mark>$4");
src_str

    Je travaillais sur un point culminant de script et résolu ce problème ne se rendant pas compte que le script peut avoir à mettre en évidence sur plusieurs balises.
    Voici comment je l'ai eu, de ne pas détruire les balises en essayant de mettre en évidence le contenu dans les balises, ce script met en avant les multiples instances dans le contenu, mais pas sur plusieurs tags:

    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, "\\\")
        + "\\b)";
var r = new RegExp(word,"igm")
str.replace(/(>[^<]+)/igm,function(a){
    return a.replace(r,"<span class='hl'>$1</span>");
})

    Pas sûr de la façon de combiner ces scripts et de faire ressortir au cours de plusieurs balises fonctionnent mais ne garder mes yeux sur ce fil.

  3. 1

    J'ai essayé la solution retenue et il semble se briser sur des pages complexes comme celui-ci (récursivité infinie). Aussi, je ne vois pas vraiment l'intérêt de s'appuyer sur jQuery, j'ai donc réécrit le code pour être indépendant de jQuery (c'est aussi sensiblement plus courte et ne prend pas en charge la fantaisie options).

    Il est assez facile d'ajouter les options de retour et de l'utilisation des classes si vous le souhaitez.

    function highlight(re, node, depth, maxdepth){
    node = node || document.body;
    depth = depth || 0;
    maxdepth = maxdepth || 10;

    if( node.nodeType === 3 ){
        var match = node.data.match(re);
        if(match){
            var span = document.createElement('span');
            span.style.backgroundColor = '#ffa';
            var wordNode = node.splitText(match.index);
            wordNode.splitText(match[0].length);
            var wordClone = wordNode.cloneNode(true);
            span.appendChild(wordClone);
            wordNode.parentNode.replaceChild(span, wordNode);
            return 1;
        }
    } else if( depth === maxdepth ){
        console.log( 'Reached max recursion depth!', node );
    } else if( (node.nodeType === 1 && node.childNodes) && !/(script|style)/i.test(node.tagName) ) {
        for( var i = 0; i < node.childNodes.length; i++ ){
            i += highlight(re, node.childNodes[i], depth + 1, maxdepth);
        }
    }
    return 0;
}