transformer des mots clef en lien en JS

Version imprimable

25/06/2008, 15h42
agrotic

transformer des mots clef en lien en JS

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.
25/06/2008, 16h12
MeDioN

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

pour le moment, j'ai la fonction suivante :
Code:

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

25/06/2008, 16h41
SpaceFrog

regarde du coté de \w et \b dasn la regExp
25/06/2008, 16h42
SpaceFrog

ce post rejoint le tien ...

http://www.developpez.net/forums/sho...d.php?t=576187
25/06/2008, 16h45
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]

Citation:

Envoyé par 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]

pas pratique comme solution ...

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

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

26/06/2008, 11h22
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:

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.

je progresse :

Code:

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

26/06/2008, 15h45
SpaceFrog

utilise un test sur la regExp pour obtenir un tableu regExp ... et avoir l'ordre ?
26/06/2008, 16h16
agrotic

Citation:

Envoyé par SpaceFrog

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) !!!!!
26/06/2008, 16h18
SpaceFrog

pas un split un test ....
26/06/2008, 16h21
agrotic

Citation:

Envoyé par SpaceFrog

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 ?
26/06/2008, 16h30
MeDioN

Nan, ça te ramène true ou false, encore pire...
26/06/2008, 17h16
SpaceFrog

Code:

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

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:

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