Highlight : Surlignage de mots clés

Version imprimable

18/09/2008, 09h51
Tchupacabra

Highlight : Surlignage de mots clés

Bonjour tout le monde,

je suis à la recherche d'une fonction me permettant de surligner en jaune certains mots dans une page HTML.
J'utilise jQuery, je lui ai donc cherché un plugin... en vain. Bizarre 8O
Bref, si quelqu'un connaissait ce plugin ou une fonction/méthode pour faire cela, je lui en serait reconnaissant !

Merci d'avance.
@ bientôt :roll:

un replace avec une regExp

Code:

1
2
3
4
5
6
 
function surbrillance(ou,quoi){
var StrReg="("+quoi+")";
var Reg=new RegExp((StrReg),"gi")
ou.innerHTML= ou.innerHTML.replace(Reg,'<span style="background-color:yellow;">$1</span>')
}

Code:

1
2
3
 
<div id="zone"> bonjour tout le monde </div>
<input type='button' value="go" onclick="surbrillance(document.getElementById('zone'), 'tout')" style="width:300px">

18/09/2008, 11h05
Tchupacabra

merci pour ton aide cependant y a un p'tit problème avec la gestion des balises HTML.
En effet, si l'élément contient des balises HTML celles-ci sont "cassées" ! :(
18/09/2008, 11h45
Tchupacabra

bon, je pense avoir bien avancé... :)
J'utilise une fonction récurcive testant le nodeType au préalable...
Je la montrerai lorsqu'elle sera un peu moins buguée. :aie:

@+
18/09/2008, 12h07
SpaceFrog

je ne vois pas pourquoi les balises html seraient coupées ...
ou alors y'a juste un réglage à faire au niveau de la regExp ...

Citation:

Envoyé par SpaceFrog

je ne vois pas pourquoi les balises html seraient coupées ...

exemple HTML :

Citation:

<div id="zone">bonjour tout <span class="tout">le monde</span></div>

génère :

Citation:

<div id="zone">bonjour <span style="background-color: yellow;">tout</span> <span class="<span style=" background-color:yellow;="">tout</span>">le monde</div>

:roll:

Sinon, je n'arrive pas à remplacer le node.textContent par du "texte+HTML" avec :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function surbrillance(node, keyword) { if (node.nodeType == 3) { var StrReg = '('+keyword+')'; var Reg = new RegExp(StrReg, 'gi'); var new_texte = node.textContent.replace(Reg, '<span style="background-color:yellow;">$1</span>'); if (new_texte != node.textContent) { node.textContent = new_texte; } } else if ((node.nodeType == 1) && node.childNodes) { for (var i = 0; i < node.childNodes.length; i++) { surbrillance(node.childNodes[i], keyword); } } } surbrillance(document.getElementById('id-div-contenu'), 'truc');
car les balises HTML sont interprétées comme du texte... y a donc <span... qui s'affiche ! :(

18/09/2008, 14h02
SpaceFrog

ben oui il suffit comme je disais de rajouter des exclusions dasn la regExp ...
18/09/2008, 15h15
Tchupacabra

bon désolé mais je n'arrive pas à exclure les balises HTML... :oops:

Code:

1
2
3
4
5
function surbrillance(ou,quoi){
var StrReg='('+quoi+')(?=.<)'
var Reg=new RegExp(StrReg,"gi")
ou.innerHTML= ou.innerHTML.replace(Reg,'<span style="background-color:yellow;">$1</span>')
}

18/09/2008, 18h10
Tchupacabra
bon c'est super sympa de ta part de m'aider... cependant, ce n'ai pas encore opérationnel. :aie: mais j'y suis presque...

sur :
Code:

1 2 3 <div id="zone">bonjour 1 tout <span class="tout">le monde</span> 2 tout <div><hr /><img src="" alt="" /> 3 4 touttout <img src="/images/tout.gif" alt="" /><hr /></div> 5 tout</div>
avec : var StrReg='('+quoi+')(?=.<)';
j'obtiens :

Citation:

bonjour 1 tout le monde 2 tout
3 4 touttout
5 tout

-> 2 spans au lieu 5 !

avec : var StrReg='('+quoi+')(?=[^>]*<)';
j'obtiens :

Citation:

bonjour 1 tout le monde 2 tout
3 4 touttout
5 tout

-> 4 spans sur 5...

Un dernier coup de pouce STP. :roll: