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