Discussion :

[agrotic]

Bonjour,

je cherche � mettre en place un syst�me un peu particulier qui existe sur le web, mais d�velopp� par des soci�t�s commerciales (je le fais pour une assoc qui cherche � dynamiser l'interface de son site web � l'aide d'un glossaire automatique) :
le javascript parse un texte affich� � l'�cran, reconnait certains mots clef et les transforme en lien qui affichera la d�finition du mot en infobulle.

j'ai trouv� dans les sources Javascript de D�veloppez.com comment afficher l'infobulle sur une balise HTML (http://javascript.developpez.com/sou...=tips#infopage), mais pas comment ajouter le lien � mon mot clef.

merci de votre aide � tous !

ex de fonctionnement :
site igeneration (http://www.igeneration.fr/fr/actu/6144/ : le mot clef photo n'est pas un lien � la base, mais un javascript le transforme en lien)

Nicolas.

[MeDioN]

Est ce que tu as d�j� une association "mot" => "lien" de faite?

[agrotic]

pour le moment, j'ai la fonction suivante :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
function AddLink(pElementID, pKeyword, pLinkHTMLBody){
	var pOrigine = document.getElementById(pElementID).innerHTML; 
	var reg=new RegExp("("+pKeyword+")", "g");
	var pNew = pOrigine.replace(reg,"<a href='#' class='GlossLink'>$1</a>");
	document.getElementById(pElementID).innerHTML = pNew;
}

qui transforme le texte en lien, sauf que j'ai du mal � ne s�lectionner que les mots complets et pas les mots 'commen�ant par' ...
je sais, je suis un novice en regexp...

[SpaceFrog]

regarde du cot� de \w et \b dasn la regExp

[SpaceFrog]

ce post rejoint le tien ...

http://www.developpez.net/forums/sho...d.php?t=576187

[MeDioN]

Si tu veux pas un mot "commen�ant par", remplace ton mot suivi d'une ponctuation

au lieu de remplacer (mot), remplace mot[ |\?|\.|,etcetc]

[agrotic]

Si tu veux pas un mot "commen�ant par", remplace ton mot suivi d'une ponctuation

au lieu de remplacer (mot), remplace mot[ |\?|\.|,etcetc]

pas pratique comme solution ...

le \b non plus... le regexp ne marche plus avec :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
 
function AddLink(pElementID, pKeyword, pLinkHTMLBody){
	var pOrigine = document.getElementById(pElementID).innerHTML; 
	var reg=new RegExp('(\b'+pKeyword+'\b)', 'gi');
	var pNew = pOrigine.replace(reg,'<a href="#" class="GlossLink" onmouseover="Tooltip(\'' + pLinkHTMLBody + '\');">$1</a>');
	document.getElementById(pElementID).innerHTML = pNew;
}

et je n'arrive pas � exclure les mots qui sont dans des tags...
je ne suis vraiment pas dou�...

[agrotic]

en plus, j'essaye de r�cup�rer le num�ro d'ordre du remplacement effectu� pour donner un id au lien g�n�r� :
je vise

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
<a href="#" id="tooltip[id]" onMouseOver="tooltip('tooltip[id]', '[HTML]')">[mot clef]</a>

la fonction tooltip(pLinkID, pHTML) permettant d'afficher l'infobulle au niveau du lien dont l'ID est connu ; infobulle contenant le code HTML voulu.

merci � tous.
Nicolas.

[agrotic]

je progresse :

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
17
 
function AddLink(pElementID, pKeyword, pLinkHTMLBody){
	var pOrigine = document.getElementById(pElementID).innerHTML; 
	if(1==2){
		var reg=new RegExp('('+pKeyword+')', 'gi');
		var pNew = pOrigine.replace(reg,'<a href="javascript:void(null)" class="GlossLink" id="tooltip_'+pKeyword+'" onMouseOver="Tooltip(\'tooltip_'+pKeyword+'\', \'<div class=tooltip_content>' + pLinkHTMLBody + '</div>\');">$1</a>');
	} else {
		var pNew = '';
		var LinkID = 'tooltip_'+pKeyword;
		var reg=new RegExp('('+pKeyword+')', 'gi');
		var RegTab = pOrigine.split(reg);
		for(i=0; i<RegTab.length; i++){
			pNew += RegTab[i].replace(pKeyword, '<a href="javascript:void(null)" class="GlossLink" id="'+LinkID+i+'" onmouseover="Tooltip(\''+LinkID+i+'\', \'<div class=tooltip_content>' + pLinkHTMLBody + '</div>\');">'+pKeyword+'</a>');
		}
	}
	document.getElementById(pElementID).innerHTML = pNew;
}

sauf que la m�thode utilis�e me supprime carr�ment les mots recherch�s sous IE : RegTab[i].replace m'efface le mot clef
alors que le pOrigine.Replace(reg ...) fonctionne bien (mais ne permet de jouer avec le num�ro d'ordre de l'�l�ment en regExp) ...

[SpaceFrog]

utilise un test sur la regExp pour obtenir un tableu regExp ... et avoir l'ordre ?

[agrotic]

utilise un test sur la regExp pour obtenir un tableu regExp ... et avoir l'ordre ?

c'est pour �a que je fais un split...
mais IE et FF ne le g�rent pas de la m�me fa�on !!!!!
la chaine recherch�e est absente du tableau g�n�r� sous IE (le 7) alors qu'elle y est sous FF (le 3) !!!!!

[SpaceFrog]

pas un split un test ....

[agrotic]

pas un split un test ....

test me dit si j'ai un match et me donne le num�ro du caract�re o� commence le match. non ?
quel rapport avec les tableaux ?

[MeDioN]

Nan, �a te ram�ne true ou false, encore pire...

[SpaceFrog]

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

var reg=new RegExp("(\b"+pKeyword+"\b)", "g");

[agrotic]

Merci SpaceFrog,

ainsi, je n'ai que le mot en lui-m�me, mais je ne l'ai qu'une seule fois, m�me s'il est pr�sent plus souvent. est-ce normal ?

sinon, pour g�rer mon soucis sous IE, j'ai fait comme ceci :

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
17
18
19
20
21
22
23
24
 
function AddLink(pElementID, pKeyword, pLinkHTMLBody){
	var pOrigine = document.getElementById(pElementID).innerHTML; 
	var pNew = '';
	var LinkID = 'tooltip_'+pKeyword;
	var reg=new RegExp("(\b"+pKeyword+"\b)", "gi");
	var RegTab = pOrigine.split(reg);
	for(i=0; i<RegTab.length; i++){
		if( (navigator.userAgent.toLowerCase().indexOf('msie') + 1)){
			// navigateur IE
			if(i != RegTab.length-1){
				// pas le dernier élément du tableau, on ajoute le lien avec le mot-clef
				pNew += RegTab[i] + '<a href="javascript:void(null)" class="GlossLink" id="'+LinkID+i+'" onmouseover="Tooltip(\''+LinkID+i+'\', \'<div class=tooltip_content>' + pLinkHTMLBody + '</div>\');">'+pKeyword+'</a>';
			} else {
				// dernier élément du tableau, on n'ajoute pas le lien avec le mot-clef
				pNew += RegTab[i];
			}
		} else {
			// pas IE
			pNew += RegTab[i].replace(pKeyword, '<a href="javascript:void(null)" class="GlossLink" id="'+LinkID+i+'" onmouseover="Tooltip(\''+LinkID+i+'\', \'<div class=tooltip_content>' + pLinkHTMLBody + '</div>\');">'+pKeyword+'</a>');
		}
	}
	document.getElementById(pElementID).innerHTML = pNew;
}

un horrible test ... mais qui fonctionne