[RegExp] Réécriture champ texte pour mise en forme url [Résolu]

[Meri Nose]

Bonjour à tous,

C'est vraiment en cas d'extrême limite que je me résous à poster dans un forum, la plupart du temps en parcourant internet je trouve les réponse à mes questions. Mais là, non, je sais pas pourquoi

Trève de blabla, voici mon problème :

J'ai un formulaire, tout bête, avec entre autre deux champs texte, tout bête eux aussi :

Code :

1
2
3
 
<input type="text" name="title" id="title" value="" maxlength="64" />
<input type="text" name="url" id="url" value="" maxlength="16" />

Ce que j'aimerai faire :

Lorsque j'écris par exemple "J'adore les patates " dans le champs title, le champs url se remplisse automatiquement de la forme : "j-adore-les-patates". Ca ressemble à du URL rewriting, c'est normal L'URL sera ensuite stockée dans ma base, puis resservie sous la forme index.php?post=j-adore-les-patates puis, à coup de htaccess, en /j-adore-les-patates.html.

J'ai essayé de nombreux pattern et fonctions en Javascript (j'utilise jQuery), avec quelque chose qui ressemble à ça et qui fonctionne relativement bien :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$("#title").keyup(function () {
    var value = $(this).val();
    $("#url").val(value.replace(/[' ]/g, patternURL).toLowerCase());
}).keyup();
 
function patternURL(car) {
  if(car == "'" || car == " ") return "-";
  if(car == "ç") return "c";
  if(car == "é" || car == "è" || car == "ê") return "e";
  if(car == "à" || car == "â") return "a";
  if(car == "ù" || car == "û") return "u";
  if(car == "ô") return "o"; */
}

La fonction est absolument horrible mais définie bien ce que je veux faire :

• Remplacer les caractères accentués par des non accentués
• Remplacer les caractères spéciaux par un tiret

Mais je ne veux pas, en cas de titre "Hey ! Beignet !" un truc genre "Hey------Beignet--" mais bien "hey-beignet".

Voila, j'espère avoir été assez clair, je continue à chercher de mon côté.

A très vite, et surtout, merci !!

[Bovino]

Pour simplifier, à ta place je procèderais en deux étapes :
* remplacement des caractères accentués et autres (en faisant une recherche, il y a eu récemment diverses solutions de données à ce sujet) ;
* remplacement de tout les caractères indésirés restant

Code :

1
2
var value = $(this).val();
value = value.replace(/[\W+]/g, '-');

[Meri Nose]

Envoyé par Bovino

Code :

Je ne connaissais pas cette regexp, je te remercie vivement !! Plus qu'à trouver comment supprimer le trop-plein de tirets et ce sera parfait...

Encore merci à toi !

[Bovino]

Normalement, ça le fait déjà
\W correspond à tout caractère non alphanumérique (donc autre que [a-z0-9]) et le + indique que ce caractère peut être présent plusieurs fois de suite.

[Loceka]

Envoyé par Bovino

Code :

Envoyé par Bovino

Normalement, ça le fait déjà
\W correspond à tout caractère non alphanumérique (donc autre que [a-z0-9]) et le + indique que ce caractère peut être présent plusieurs fois de suite.

Pas tout à fait non...

Ecrite comme ça oui : /\W+/g.
Ecrite comme ça /[\W+]/g par contre elle sélectionne le premier caractère non alpha-numérique ou le premier caractère "+" et ceci de façon globale dans la chaine.

C'est donc cette regex là qu'il faut utiliser : /\W+/g.

[Bovino]

C'est vrai que j'ai un peu dérapé sur le coup !

[Meri Nose]

Effectivement, ta regex Loceka est vraiment bien. J'aurai dû lire les docs sur le sujet, j'avoue que j'ai un peu mer... bâclé l'affaire, mais vous savez ce que c'est je suppose, à force de se prendre la tête, tout s'embrouille.

Donc, j'arrive à remplacer (plutôt : supprimer) les caractères non alphanumériques. C'est déjà pas mal, mais en appliquant une fonction avant ce replace, peut-être arriverai-je à modifier les caractères accentués en non accentués. Justement, je n'arrive pas à trouver de regex facilitant la chose. J'ai bien une idée, du genre :

1. Trouver les caractères accentués
2. Les remplacer par leur équivalent non accentué

Je continue à potasser le problème, et vous tiens au jus.

Et encore merci à vous !

Edit :

Je pense avoir trouvé une idée :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
$("#title").keyup(function () {
  var value = $(this).val();
  // 1
  value = value.toLowerCase();
 
  // 2
  value = value.replace(/[àáâãäå]/g,"a").replace(/[èéêë]/g,"e").replace(/[ìíîï]/g,"i").replace(/[ðòóôõö]/g,"o").replace(/[ùúûü]/g,"u").replace(/[ýÿ]/g,"y").replace(/[ç]/g,"c");
 
  //3
  value = value.replace(/\W+/g, '-')
  $("#url").val(value);
}).keyup();

Ainsi :

1. Tous les caractères en minuscule
2. Remplacement des accents
3. Remplacement des caractères non alphanumériques

Par exemple : Hé, c'est un beignet ! -> he-c-est-un-beignet-

Plus qu'à supprimer le tiret de fin (faciiile !).
Par contre, j'aimerai modifier l'étape 2, vraiment trop moche...

Merci à vous, again

[Loceka]

Comme l'a dit Bovino, il y'a plein de posts sur le forum Javascript de dvp qui parle de cette substitution de caractères accentués.

Mais de mémoire tous se résument à la même chose : prendre dans la table ascii chaque caractère accentué et faire la substitution à la main avec le caractère qui va bien.
Il n'y a pas de fonction toute faite pour ça.

[Meri Nose]

Envoyé par Loceka

prendre dans la table ascii chaque caractère accentué et faire la substitution à la main avec le caractère qui va bien.

J'imagine que c'est même mieux, il n'y a pas de problèmes avec ma technique vis-à-vis de l'encodage de caractères ? Je ne pense pas, mais je préfère être sûr. C'est-à-dire : ma page et mes données SQL sont encodées en utf-8, tout va bien de ce côté-là, mais est-ce que le client peut avoir un navigateur qui envoie des POST dans un autre encodage ?

[Watilin]

Pour les accents, je ressors ceci. On s'était bien éclatés ce jour-là

Pour l'encodage, maintenant que tu le dis, j'ai un petit doute. A priori, tu as déjà tout réglé en UTF8 donc tu ne devrais pas avoir de problèmes. Mais là, je me pose la question : que se passe-t-il si l'utilisateur change volontairement la détection d'encodage de son navigateur ?
Je vais faire des tests.

Edit: voir plus bas.

[Meri Nose]

J'attends tes résultats avec impatience

[Watilin]

C'est évident en fait, j'avais oublié (fin bon, ça m'a permis de faire mumuse avec Wireshark ^^)
Les données de formulaires sont transmises dans le format application/x-www-form-urlencoded qui repose sur l'ASCII simple. Tous les caractères « sensibles » sont convertis en %xx, par exemple %20 pour l'espace. (En réalité il s'agit du code ASCII en hexa, et on peut l'obtenir avec encodeURIComponent.)
Conclusion : si le charset de la page est bien déclaré, aucun problème avec le formulaire !

[Meri Nose]

Eh oui, maintenant que tu le dis, c'est bien ça... Aucun problème d'encodage, c'est parfait, je suis bien content.

Histoire de terminer, au cas où ça peut intéresser d'éventuels développeurs, le code que j'ai trouvé et qui marche pas trop mal :

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
25
// Fonction de création de l'URL en live
// Si vous avez des idées d'améliorations, n'hésitez pas :)
	$("#title").bind("keyup", function() {
		var title = $(this).val(); // Récupération titre
		var url = title;
		url = url.toLowerCase(); // URL en minuscule
		url = url.replace(/[àáâãäå]/g,"a").replace(/[èéêë]/g,"e").replace(/[ìíîï]/g,"i").replace(/[ðòóôõö]/g,"o").replace(/[ùúûü]/g,"u").replace(/[ýÿ]/g,"y").replace(/[ç]/g,"c").replace(/\W+/g, '-'); // Remplace accents par non accentués, et caractères non alphanumeriques par tiret
		var posLastTiret = url.lastIndexOf("-", url.length-1); // position dernier tiret
		// Si dernier caractère est tiret, on supprime
		// Cas rencontré si titre termine par caractère non alphanumérique, tiret remplaçant espace
		// Exemple : "Ma chaine !"
		if(url.length == posLastTiret+1) {
			url = url.substring(0, posLastTiret);
		}
		// Si longueur url > 32, on coupe au dernier mot entier
		if(url.length > 32) {
			var urlSplit = url.split("-");
			var nb_mots = urlSplit.length;
			url = url.substring(0, nb_mots);
			return false;
		}
		// Affiche dans champs url
		$("#url").val(url);
		return false;
	});

Je compte bien essayer de faire un plugin pour cette histoire d'accents, mais c'est surtout histoire de m'amuser à... créer un plugin jqUery (pour une fois que j'ai l'occasion !)

En tous cas, merci à vous tous pour vos précieux conseils !
See you later

[Watilin]

Compare simplement le dernier caractère de url au lieu d'utiliser lastIndexOf. Sinon, si ta chaîne ne contient pas de tiret, elle sera parcourue en entier pour rien…

Code :

1
2
3
if ('-' == url[url.length - 1]) {
	url = url.substring(0, url.length - 1);
}

Ou, si on est vraiment pointilleux, on met url.length - 1 dans une variable pour éviter que le même calcul soit fait deux fois.

Code :

1
2
3
4
var n = url.length - 1;
if ('-' == url[n]) {
	url = url.substring(0, n);
}

C'est la solution la plus efficace. Mais si tu recherches plutôt la concision, les regexp te proposent au moins deux autres solutions :

Code :

url = url. … .replace(/[ç]/g,"c").replace(/\W+$/g, '').replace(/\W+/g, '-');

Code :

url = url. … .replace(/[ç]/g,"c").replace(/\W+/g, '-').replace(/-$/, '');

(je pense que la seconde est un poil moins efficace).