«Afficher son email en limitant les risques de spam» pour les nuls

Bonjour à tous,

J'ai déjà eu l'occasion d'utiliser la fonction JS pour afficher son email en limitant les risques de spam, proposée ici par Julien Royer.

Elle est très sympa, mais ça demande d'avoir la main sur le code HTML, ce qui n'est pas toujours le cas. Pour un petit forum que je monte (punBB), mais aussi pour ma propre information, je me demandais s'il était possible de faire un script parsant du texte brut, texte brut répondant à un schéma donné, pour le remplacer par un code HTML donné. Je sais faire ça avec des regexp mais ne sais pas comment les utiliser en JS, ni si c'est possible de remplacer un bout de texte dans un document sans toucher au texte autour.

Concrètement, il faudrait transformer ceci:

Pour m'écrire: user +arobase+ host.com

en ceci:

Pour m'écrire: <a href="mailto:moi@site.com">user@host.com</a>

Si JS désactivé, on retombe sur la version texte, qui reste relativement lisible et compréhensible même si moins pratique.

Techniquement, on fixe un format simple de chaine de caractères (<user> +arobase+ <host avec tld>). C'est moins protégé que ce que propose Julien, et pour un gros site ça n'ira probablement pas, mais pour un petit site ça devrait faire l'affaire.
Aussi, si c'est nécessaire, on peut partir d'un code ressemblant à ceci:

Pour m'écrire: <em>user +arobase+ host.com</em>

si ça facilite ou permet le parsing.

Voili voilou. Ça vous semble jouable? Ça existe déjà quelque part en belle petite fonction bien propre comme il faut?

Merci d'avance pour vos lumières.
Modifié par Florent V. (23 Jul 2007 - 15:59)

Hello,

Parcourir tout le texte du document, c'est possible techniquement, mais ça me paraît un peu lourd, et potentiellement cause de problème : rien n'empêche a priori que "user +arobase+ host.com" n'apparaisse dans du contenu que l'on ne maîtrise pas, ou à un endroit où l'on ne voudra pas qu'il soit remplacé, par exemple dans un <textarea>.

Il serait donc à mon avis plus simple que les mails à remplacer soient balisés (par exemple comme tu l'as fait avec <em>), et encore mieux marqués par une classe HTML. Mais évidemment, ça dépend comme tu le fais remarquer de ton contrôle sur le code HTML.

Qu'est-ce que tu en penses ?

Balisés avec <em>, c'est jouable pour la saisie dans un petit forum ou CMS. Marqués avec une classe, ça ne sera à priori pas possible.

La problématique du contrôle sur le code HTML, c'est celle de l'insertion de contenu par des non techniciens (ou l'insertion dans un cadre technique limité: forum avec BBcode, CMS avec éditeur WYSIWYG ou saisie en mode wiki, etc.).

Pour les textarea, je n'y avais pas pensé. Travailler uniquement sur les <em> (ou, au choix, un autre élément de type en-ligne comme <span> -- à priori peu utile --, <i>, <u>, <b>, <strong>...) règle-t-il le problème? Ou bien faut-il une sécurité supplémentaire?

Déjà, une version qui devrait marcher dans ton cas si tu balises avec des <em> :

if (document.getElementById && document.createTextNode && {}.hasOwnProperty) {
(function(tagName, regExp) {
	function init() {
		if (document.body && !init.done) {
			init.done = true;

			initEls(getEls());
		}
	}

	function getEls() {
		var elsTn = document.getElementsByTagName(tagName), els = [];
		for (var i = 0, el; (el = elsTn[ i]); ++i) {
			els[els.length] = el;
		}

		return els;
	}

	function initEls(els) {
		for (var i = 0, el; (el = els[ i]); ++i) {
			initEl(el);
		}
	}

	function initEl(el) {
		var str = el.firstChild && el.firstChild.nodeValue, m, email;
		if (str && (m = regExp.exec(str))) {
			email = m[1] + "@" + m[2];

			el.parentNode.replaceChild(createEl("a", {href: "mailto:" + email}, email), el);
		}
	}

	// DOM
	function createEl(n) {
		var a, i = 0, e = document.createElementNS ? document.createElementNS("http://www.w3.org/1999/xhtml", n) : document.createElement(n);
		while ((a = arguments[++i])) {
			if (typeof a === "string") {
				e.appendChild(document.createTextNode(a));
			} else {
				for (var p in a) {
					if (a.hasOwnProperty(p)) {
						e[p] = a[p];
					}
				}
			}
		}

		return e;
	}

	// Events
	function addLoadEvent(f) {
		if (document.addEventListener) {
			document.addEventListener("DOMContentLoaded", f, false);
		}

		if (window.addEventListener) {
			addEventListener("load", f, false);
		} else if (document.addEventListener) {
			document.addEventListener("load", f, false);
		} else if (window.attachEvent) {
			attachEvent("onload", f);
		}
	}

	addLoadEvent(init);
})(
	"em", /^\s*([^\s]+)\s+\+arobase\+\s+([^\s]+\.[^\s]+)\s*$/
);
}

Sinon, il est envisageable à mon avis de faire quelque chose qui parcourra tout le texte, mais ça risque d'être lourd, et il faut être sûr que le remplacement pourra se faire sans problème (par exemple en limitant le parcours du texte à un élément particulier du document).
Modifié par Julien Royer (23 Jul 2007 - 17:34)

Florent V. a écrit :
J'ai bon?

Oui, bon résumé.

Florent V. a écrit :
Je te paie au noir?
(Au chocolat noir.)

Pourquoi pas, j'aime bien le chocolat noir.

Remarque, je vais plutôt faire payer le SAV, c'est une solution rentable à long terme.

P.S. : le script est améliorable (support de IE 5 par exemple), et tu peux changer le type de balises (<em>) et l'expression régulière.
Modifié par Julien Royer (23 Jul 2007 - 20:11)

Ce script pose moins de problème que celui à base de <span>u,h,d qui dans certains cas (pourquoi et comment je ne sais pas... j'ai pas trop cherché - Julien as-tu déjà constaté ça ?) force IE6 ou 7 à recharger la page sans arrêt.

Est-ce que <address>user +arobase+ host.com</address> ne serait pas plus pratique ?

a+

Arsene a écrit :
Est-ce que <address>user +arobase+ host.com</address> ne serait pas plus pratique ?

Comment fais-tu saisir <adress> à un non technicien sur un forum ou dans un CMS?

Arsene a écrit :
@Julien : pas trop le temps maintenant mais je te passe en MP un lien vers une page test dès que je la retrouve.

Merci.

Arsene a écrit :
Pas non plus celui de me pencher sur la question de <address> comme block mais un display:inline ne ferait-il pas l'affaire ?

Ce que je voulais dire, c'est qu'à l'heure actuelle le script remplace l'élément existant par un élément a, ce qui peut poser problème étant donné que address et a ne peuvent pas forcément apparaître aux mêmes endroits dans un document HTML. Ceci dit, c'est vrai que le script pourrait insérer l'élement a dans address.

Je suis d'accord avec toi sur le fait qu'une solution hybride PHP pour le parsing du texte dans une syntaxe Wiki/BBCode... et JavaScript serait sans doute intéressante.
Modifié par Julien Royer (24 Jul 2007 - 22:23)

Y compris (soyons fous !) un contact@domaine.ext en dur que PHP parse en contact+at+domaine.ext ???

Autre prob rencontré un jour avec le script <span>h,h,d : une liste de contacts. Tu es obligé d'insérer une ligne contenant une adresse vide entre deux adresses valables... pas glop.

Arsene a écrit :
Y compris (soyons fous !) un contact@domaine.ext en dur que PHP parse en contact+at+domaine.ext ???

En effet, grand fou !

Arsene a écrit :
Autre prob rencontré un jour avec le script <span>h,h,d : une liste de contacts. Tu es obligé d'insérer une ligne contenant une adresse vide entre deux adresses valables... pas glop.

Ah mais décidément, il y a plein de choses à reprocher à ce script, mais vous ne me le dites que maintenant.

Je ne vois pas trop ce que tu veux dire en l'occurrence par contre.

Ben... je viens d'aller sur la page du script pour copier-coller et je vois que Benjamin a déjà apparemment fait la remarque

Essaie ça :

<span class="email"><span class="u">nom</span><span class="h">domaine</span><span class="d">com</span></span>
<span class="email"><span class="u">autrenom</span><span class="h">domaine</span><span class="d">com</span></span> 

puis ça :

<span class="email"><span class="u">nom</span><span class="h">domaine</span><span class="d">com</span></span> 
<span class="email"><span class="u"></span><span class="h"></span><span class="d"></span></span> 
<span class="email"><span class="u">autrenom</span><span class="h">domaine</span><span class="d">com</span></span> 

Il est donc probable qu'entre temps ça a été corrigé ????
Modifié par Arsene (25 Jul 2007 - 09:33)

Ah OK, je n'avais pas saisi ce que tu voulais dire.

Arsene a écrit :
Il est donc probable qu'entre temps ça a été corrigé ????

Oui.

Arsene a écrit :
Juste histoire de gagner du temps, tu pourrais vite fait me dire ce qui a été modifié entre la version 1 et la 2 ???

Franchement, je ne sais plus trop.

Correction du bug en question, et le reste c'est du cosmétique.