Discussion :

[Tchupacabra]

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

[SpaceFrog]

un replace avec une regExp

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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">

[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" !

[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.

@+

[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 ...

[Tchupacabra]

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

exemple HTML :

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

génère :

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[SpaceFrog]

ben oui il suffit comme je disais de rajouter des exclusions dasn la regExp ...

[Tchupacabra]

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

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>')
}

[Tchupacabra]

bon c'est super sympa de ta part de m'aider... cependant, ce n'ai pas encore opérationnel. mais j'y suis presque...

sur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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

-> 2 spans au lieu 5 !


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

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

-> 4 spans sur 5...

Un dernier coup de pouce STP.