Modifier les liens d'un page en fonction de leur "activité"

Un chose agréable sur les sites c'est lorsque d'un simple coup d'oeil on peu différencier les liens externe, interne, les liens vers des fichier en téléchargement, vers des mails ou encore (plus rare) les liens qui exécute du javascript ou qui pointe vers une ancre de la page…
Voici une fonction qui va se charger (moyennant un léger paramétrage) d'identifier les différents type de liens et de leur assigner une classe propre a leur fonction.

Fonctionnement

La fonction va “s'attacher” au onload de la page et s'exécute après le chargement. Elle va récupéré (via getElementsByTagName) la liste des liens de la page. Cette liste va être parcouru en essayant d'identifier (avec indexOf et des RegExp) le type de lien.

Exemple

Comme vous pouvez le voir, l'exemple est la page elle même.
Voici tous de même un exemple comparatif :

Voici un exemple de résultat :
Avant :
lien interne
lien externe
lien email
lien pj
ignore
lien ancre
Apres :
lien interne
lien externe
lien email
lien pj
ignore
lien ancre

Code

javascript
/*Refonte des liens*/
addEvent(window,'load',AddClass4Link);
function AddClass4Link() {
	/*INIT*/
	var DefaultTarget='_blank'; /* Cible par defaut des lien externe */
	var UnchangedLink='ignore'; /* Les liens aillant cette classe seront ignoré */
	/* Classe par defaut pour chaque type de lien */
	var Classe=new Array();
	Classe['ExternalLink']='externallink';
	Classe['EmailLink']='emaillink';
	Classe['FileLink']='pjlink';
	Classe['InternalLink']='internallink';
	Classe['AnchorLink']='anchor';
	Classe['JavascriptLink']='';
	/* liste des extensions de fichier considéré comme lien de telechargement */
	var FileExt=new Array('exe','zip');
 
	/*Traitement*/
	var x = document.getElementsByTagName("a");
	for (i = 0; i < x.length; i++) {
		var AnchorLink = new RegExp("#.+","i"); /*HREF Qui contient # suivit d'un mot*/
		var EmailLink = new RegExp("mailto:","i"); /*HREF Qui contient mailto: */
		var JavascriptLink = new RegExp("javascript:","i"); /*HREF Qui contient javascript: */
		/*Lien ignoré*/
		if (x[i].className.indexOf(UnchangedLink)!=-1)
			continue;
		/*Cas des liens ancre*/
		else if (AnchorLink.test(x[i].href))
			x[i].className+=' '+Classe['AnchorLink'];
		/*Cas des liens email*/
		else if (EmailLink.test(x[i].href))
			x[i].className+=' '+Classe['EmailLink'];
		/*Cas des liens javascript*/
		else if (JavascriptLink.test(x[i].href))
			x[i].className+=' '+Classe['JavascriptLink'];
		/*Cas des liens interne*/
		else if (x[i].href.indexOf(window.location.host)!=-1)
			x[i].className+=' '+Classe['InternalLink'];
		/*Cas des liens externe*/
		else if (x[i].href.indexOf(window.location.host)==-1) {
			x[i].className+=' '+Classe['ExternalLink'];
			x[i].target=DefaultTarget;
		}
		/*Traitement extérieur des lien vers les fichiers. De cette façon, on peu cumuler lien interne + fichier ou lien externe + fichier */
		for (j=0;j<FileExt.length;j++) {
			var FileLink = new RegExp("\."+FileExt[j],"i"); /*HREF Qui contient .ext ou ext est une extension sus-citée */
			if (FileLink.test(x[i].href))
				x[i].className+=' '+Classe['FileLink'];
		}
 
	}
}
function addEvent( obj, type, fn ) {
//John Resig : http://ejohn.org/projects/flexible-javascript-events/
	if ( obj.attachEvent ) {
		obj['e'+type+fn] = fn;
		obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
		obj.attachEvent( 'on'+type, obj[type+fn] );
	} else
		obj.addEventListener( type, fn, false );
}

!! Le paramétrage de la fonction se trouve entre /*INIT*/ et /*Traitement*/ !!


iDo 09/03/2006 11:21