Nouveau sur le forum ? Voici votre case départ pour bien débuter.

Incontournables XHTML / CSS :

Auteur Pages : [>] [>>]
Florent V.
# 23 Jul 2007 - 15:55:24
Citer
On va manger des chips.
Modérateur
13461 Posts
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. smile
Modifié par Florent V. (23 Jul 2007 - 15:59)

http://www.covertprestige.net 
^
Julien Royer
# 23 Jul 2007 - 16:38:02
Citer
Coin coin
Modérateur
3708 Posts
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 ?

^
Florent V.
# 23 Jul 2007 - 16:57:51
Citer
On va manger des chips.
Modérateur
13461 Posts
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?

http://www.covertprestige.net 
^
Julien Royer
# 23 Jul 2007 - 17:34:07
Citer
Coin coin
Modérateur
3708 Posts
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.
# 23 Jul 2007 - 19:13:04
Citer
On va manger des chips.
Modérateur
13461 Posts
Waouh, joli boulot, ça marche nickel (FF2, Opera9, IE5.5+). smile

Je parcours ça du regard mais je comprend pas tout ( biggol ).
Je crois comprendre que tu testes des méthodes (si ça s'appelle bien comme ça), et si elles sont disponibles tu définies une fonction que tu appelles en même temps, avec une syntaxe du type:
(function(nomparam1, nomparam2) {détail de la fonction}) (param1, param2);

ce qui revient au même que:
function nomdelafonction (nomparam1, nomparam2) {détail de la fonction}
nomdelafonction (param1, param2);

J'ai bon?
(Je vais aller apprendre JS, moi, plutôt que poser des questions à deux francs...)

En tout cas, merci bien. Avec la modification facile de la balise HTML englobante et de la syntaxe du texte à l'intérieur, c'est une solution très souple. smile

Je te paie au noir?
(Au chocolat noir.) lol
Modifié par Florent V. (23 Jul 2007 - 21:46)

http://www.covertprestige.net 
^
Julien Royer
# 23 Jul 2007 - 20:10:15
Citer
Coin coin
Modérateur
3708 Posts
Florent V. a écrit :
J'ai bon?

Oui, bon résumé. smile
Florent V. a écrit :
Je te paie au noir?
(Au chocolat noir.) lol

Pourquoi pas, j'aime bien le chocolat noir.

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

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)

^
Florent V.
# 23 Jul 2007 - 21:49:15
Citer
On va manger des chips.
Modérateur
13461 Posts
Julien Royer a écrit :
et tu peux changer le type de balises (<em>) et l'expression régulière.

Oui, j'ai noté. smile

Au fait, peut-être faudrait-il un lien depuis le post que j'indique (celui avec le script qui se base sur une syntaxe HTML complète) vers ce sujet?

http://www.covertprestige.net 
^
Julien Royer
# 23 Jul 2007 - 22:13:54
Citer
Coin coin
Modérateur
3708 Posts
Florent V. a écrit :
Au fait, peut-être faudrait-il un lien depuis le post que j'indique (celui avec le script qui se base sur une syntaxe HTML complète) vers ce sujet?

Voilà chose faite.

^
Arsene
# 24 Jul 2007 - 13:57:54
Citer
793 Posts
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+

^
Julien Royer
# 24 Jul 2007 - 14:13:22
Citer
Coin coin
Modérateur
3708 Posts
Arsene a écrit :
Julien as-tu déjà constaté ça ?

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

Le problème c'est que <address> est de type bloc.

^
Florent V.
# 24 Jul 2007 - 18:31:02
Citer
On va manger des chips.
Modérateur
13461 Posts
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? cligne

http://www.covertprestige.net 
^
Arsene
# 24 Jul 2007 - 19:21:07
Citer
793 Posts
@Florent
... de la même façon qu' <em> ou n'importe quelle autre balise html valide... au pire un script php détecte la chaine +arobase+ et l'encadre là où il faut par ce qu'il faut. Bon, c'était juste pour dire que <address> me paraissait dans ce cas précis plus pertinent en terme de balisage que <em> mais j'en fais pas un fromage non plus, hein?

@Julien : pas trop le temps maintenant mais je te passe en MP un lien vers une page test dès que je la retrouve. Pas non plus celui de me pencher sur la question de <address> comme block mais un display:inline ne ferait-il pas l'affaire ?

^
Julien Royer
# 24 Jul 2007 - 22:23:40
Citer
Coin coin
Modérateur
3708 Posts
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. smile
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)

^
Arsene
# 25 Jul 2007 - 07:31:38
Citer
793 Posts
Y compris (soyons fous !) un contact@domaine.ext en dur que PHP parse en contact+at+domaine.ext ??? lol

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.

^
Julien Royer
# 25 Jul 2007 - 09:19:33
Citer
Coin coin
Modérateur
3708 Posts
Arsene a écrit :
Y compris (soyons fous !) un contact@domaine.ext en dur que PHP parse en contact+at+domaine.ext ??? lol

En effet, grand fou ! smile
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. langue

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

^
Arsene
# 25 Jul 2007 - 09:32:16
Citer
793 Posts
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 cligne

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)

^
Julien Royer
# 25 Jul 2007 - 09:34:35
Citer
Coin coin
Modérateur
3708 Posts
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. smile

^
Arsene
# 25 Jul 2007 - 09:47:06
Citer
793 Posts
Hé hé, peut-être y'a t'il une piste de ce côté-là concernant le prob évoqué hier... il est possible (à vérifier donc) que l'ancienne version ne produisait pas ce bug. Je vais regarder ça, je tiens au courant.

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

^
Julien Royer
# 25 Jul 2007 - 09:50:57
Citer
Coin coin
Modérateur
3708 Posts
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. confused

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

^
Arsene
# 25 Jul 2007 - 13:51:58
Citer
793 Posts
Hélas je ne retrouve pas comment reconstituer le problème. J'avais additionné ce script à deux autres, l'un pour détecter la pos du curseur et l'autre pour le fil d'ariane, mais au moment de tester sur les IE PC, horreur, la page se rechargeait sans arrêt... alors que tous les autres navigateurs tournaient sans problème. Du coup comme j'avais vraiment besoin des deux autres scripts j'ai supprimé le masquage de mail. J'ai cherché en vain si il n'y avait pas un doublon de variable mais rien de bizarre à l'horizon.
En reprenant ce script et en le replaçant avec les deux autres tout marche nickel... Disons que c'était un accident aléatoire comme il en arrive quelques-uns de temps en temps ???

^
Pages : [>] [>>]

référencesLes références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles

Nikozen : Hébergement - Réalisation : Alsacreations.fr

Powered by Phedio v3.7.9 © dew
Contacter l'administrateur - 9.6 ms - Charte