Javascript remplacer une série de caractères par une autre
dans une chaîne (string)
String.replace(motif_a_remplacer, motif_de_remplacement);
Le plus simple, remplacer une seule occurrence
var String="Bonjour Jacques ..! Bonjour Marie ! Salut tout le monde ..!";
si on veut remplacer le mot "Salut" par "Bonjour" , on pourra écrire ;
var String=String.replace("Salut","Bonjour");
String devient :
"Bonjour Jacques..! Bonjour Marie ! Bonjour tout le monde ..!"
Pour remplacer toutes les occurrences du mot "Bonjour" par "Salut" le paramètre g dit de rechercher toutes les occurrences. le paramètre i dit quelque soit la case majuscules ou minuscules
var newString=myString.replace(/Bonjour/gm ,"Salut");
certains navigateurs ne supporte pas le fait d écrire les expression régulière entre barres obliques dans ce cas utiliser l'expression régulière RegExp
var myRegEx=new RegExp("Bonjour","gm");
var String=String.replace(myRegEx ,"Salut");
le résultat dans String = "Salut Jacques..! Salut Marie ! Salut tout le monde ..!"
soit le string : var txt='Caractères accentués à remplacer : à ä â et é è ê';
Les motifs à remplacer peuvent être multiples ici on va remplacer tous les a avec accent
var regAccentA = new RegExp('[àâä]', 'gi');
txt=txt.replace(regAccentA, 'a');
var regAccentE = new RegExp('[éèêë]', 'gi');
txt=txtg.replace(regAccentE, 'e');
document.write(txt); affiche Caracteres accentues a remplacer : a a a et e e e
|
|
|
Les expressions régulières
Instanciation d'un objet RegExp : var myRegex = /contenu_à_rechercher/;
échapper les / en utilisant un anti-slash :
var regex_2 = /<p>contenu_</p>/; // La syntaxe est bonne car le slash est échappé avec
if (/raclette/.test('Je mangerais bien une raclette savoyarde !')) {// Le test retourne vrai si trouvé
alert('Ça semble parler de raclette');
} else alert('Pas de raclette à l'horizon');
/raclette¦tartiflette/ = vrai si trouve l'un ou l'autre mot ou les deux
Une classe de caractères est écrite entre crochets n'importe quelle lettre contenue dans les crochets peut convenir. [aeiou] recherchera les voyelles
txt="txt.replace(/gr[ao]s/, 'pas bon'); remplace gras ou/et gros par pas bon
Si nous voulons trouver les lettres de a à k, on écrira [a-k]. Pour toutes les lettres écrire [a-z].
pour tous les chiffres : [0-9] pour des chiffres et des lettres [a-z0-9]
xclure des caractères : faire figurer un accent circonflexe au début de la classe : [^aeyuio] ignore les voyelles.
Eexclusion d'un intervalle : [^b-y] exclue les lettres de b à y.
Les caractères accentués. [a-z] ne trouve pas à, é, â etc. [a-zâäàéèùêëîïôöçñ] les trouvent.
Pour intercepter majuscules et miniscule utiliser l'option i : /[a-zâäàéèùêëîïôöçñ]/i.
Le point permet de trouver n'importe quel caractère, à l'exception des sauts de ligne (les retours à la ligne).
/gr[.}]s/ trouve gras, grès, gris et même grws !
Les quantificateurs permettent de dire combien de fois un caractère doit être recherché. Il est possible de dire qu'un caractère peut apparaître 0 ou 1 fois, 1 fois ou une infinité de fois, ou même, avec des accolades, de dire qu'un caractère peut être répété 3, 4, 5 ou 10 fois.
À partir d'ici, la syntaxe des regex va devenir plus complexe !
Les trois symboles quantificateurs
? : indique que le caractère qui le précède peut apparaître 0 ou 1 fois ;
+ : le caractère qui le précède peut apparaître 1 ou plusieurs fois (illimité);
* : le caractère qui le précède peut apparaître 0, 1 ou plusieurs fois (illimité).
Reprenons notre raclette. Il y a deux t, mais il se pourrait que l'utilisateur ait fait une faute de frappe et n'en ait mis qu'un seul. On va donc écrire une regex capable de gérer ce cas de figure : /raclett?e/
Ici, le premier t sera trouvé, et le ? signifie que le deuxième t peut apparaître 0 ou 1 fois. Raclette sera trouvéee avec 1 ou 2t ! Elle est pas belle la vie ?
Un cas saugrenu serait qu'il y ait beaucoup de t : « raclettttte ». Pas de panique, il suffit d'utiliser le quantificateur + :
/raclet+e/
Avec le symbole *, la lettre est facultative mais peut être répétée un nombre infini de fois. En utilisant *, la regex précédente peut s'écrire : /raclett*e/
Les accolades
À la place des trois symboles vus précédemment, on peut utiliser des accolades pour définir explicitement combien de fois un caractère peut être répété. Trois syntaxes sont disponibles :
{n} : le caractère est répété n fois ;
{n,m} : le caractère est répété de n à m fois. Par exemple, si on a {0, 5}, le caractère peut être présent de 0 à 5 fois ;
{n,} : le caractère est répété de n fois à l'infini.
Si la tartiflette possède un, deux ou trois t, la regex peut s'écrire :/raclet{1,3}e/
quelques exemples de regex
Chaîne Hellowwwwwwwww
Regex /Hellow+/
Résultat true
Chaîne Goooooogle
Regex /Go{2,}gle/
Résultat true
Chaîne Le 1er septembre
Regex /Le [1-9][a-z]{2,3} septembre/
Résultat true
Chaîne Le 1er septembre
Regex /Le [1-9][a-z]{2,3}[a-z]+/
Résultat false
cette regex est fausse à cause de l'espace. En effet, la classe [a-z] ne trouvera pas l'espace. Nous verrons cela dans un prochain chapitre sur les regex.
La syntaxe des regex est définie par des caractères spéciaux, comme ^, $, [ et ], ou encore + et *.
E voici la liste : ! ^ $ ( ) [ ] { } ? + * . / ¦ ... et l'oublié !
Un problème se pose si on veut chercher ces caractères tel une accolade il faut la faire précéder d'un antislash : { du coup pour rechercher un antislash il faut le faire précéder d'un antislash
entre crochet seuls les crochets doivent être "échappés avec : [$[a-c]
Les types génériques
d Trouve un caractère décimal (un chiffre)
D Trouve un caractère qui n'est pas décimal (donc pas un chiffre)
s Trouve un caractère blanc
S Trouve un caractère qui n'est pas un caractère blanc
w Trouve un caractère « de mot » : une lettre, accentuée ou non, ainsi que l'underscore
W Trouve un caractère qui n'est pas un caractère « de mot »
En plus de cela existent les caractères de type « espace blanc » :
Trouve un retour à la ligne
Trouve une tabulation
Ces deux caractères sont reconnus par le type générique s (qui trouve, pour rappel, n'importe quel espace blanc).
En résumé
Les regex constituent une technologie à part, utilisée au sein du Javascript et qui permet de manipuler les chaînes de caractères. La syntaxe de ces regex se base sur celle du langage Perl.
Plusieurs méthodes de l'objet String peuvent être utilisées avec des regex, à savoir match(), search(), split() et replace().
L'option i indique à la regex que la casse doit être ignorée.
Les caractères ^ et $ indiquent respectivement le début et la fin de la chaîne de caractères.
Les classes et les intervalles de caractères, ainsi que les types génériques, servent à rechercher un caractère possible parmi plusieurs.
Les différents métacaractères doivent absolument être échappés.
Les quantificateurs servent à indiquer le nombre de fois qu'un caractère peut être répété.
Pratique
vérifier si une chaîne de caractères correspond à une adresse e-mail. Pour rappel, une adresse e-mail est de cette forme :
javascript@siteduzero.com.
La partie locale est composéede lettres, de chiffres et éventuellement d'un tiret, un trait de soulignement et un point. Tous ces caractères peuvent être répétés plus d'une fois (il faut donc utiliser le quantificateur +) : /^[a-z0-9._-]+$/
On ajoute l'arobase. Ce n'est pas un métacaractère pas besoin de l'échapper : /^[a-z0-9._-]+@$/
Après vient le label du nom de domaine, lui aussi composé de lettres, de chiffres, de tirets et de traits de soulignement. Ne pas oublier le point, car il peut s'agir d'un sous-domaine (par exemple @tutoriels.siteduzero.com) : /^[a-z0-9._-]+@[a-z0-9._-]+$/
Puis le point de l'extension du domaine : ne pas oublier de l'échapper, c'est un métacaractère :
/^[a-z0-9._-]+@[a-z0-9._-]+.$/
Et pour finir, l'extension ! Une extension de nom de domaine ne contient que des lettres, au minimum 2, au maximum 6. Ce qui fait : /^[a-z0-9._-]+@[a-z0-9._-]+.[a-z]{2,6}$/
Testons : var email = prompt("Entrez votre adresse e-mail :", "javascript@siteduzero.com");
if (/^[a-z0-9._-]+@[a-z0-9._-]+.[a-z]{2,6}$/.test(email))
alert("Adresse e-mail valide !");
else alert("Adresse e-mail invalide !");
L'adresse e-mail est détectée comme étant valide !
RegExp possède deux méthodes : test() et exec(). La méthode test() permet de tester une expression régulière ; elle renvoie true si le test est réussi ou false si le test échoue.
exec() applique également une expression régulière, mais renvoie un tableau dont le premier élément contient la portion de texte trouvée dans la chaîne de caractères. Si rien n'est trouvé, null est renvoyé.
var sentence = "Si ton tonton";
var result = /btonb/.exec(sentence); // On cherche à récupérer le mot « ton »
if (result) { // On vérifie que ce n'est pas null
alert(result); // Affiche « ton »
L'objet RegExp contient neuf propriétés, appelées $1, $2, $3
jusqu'à $9.
il est possible d'utiliser une regex pour extraire des portions de texte, et ces portions sont accessibles via les propriétés $1 à $9.
Les parenthèses capturantes
Pour définir les informations à extraire, on utilise des parenthèses, que l'on appelle parenthèses capturantes. Exemple soit : « Je suis né en mars ». Avec les parenthèses capturantes, nous allons extraire le mois de la naissance, pour le réutiliser :
var birth = 'Je suis né en mars';
/^Je suis né en (S+)$/.exec(birth);
alert(RegExp.$1); // Affiche : « mars »
Comme les mois sont faits de caractères qui peuvent être accentués, on peut directement utiliser le type générique S. S+ indique qu'on recherche une série de caractères, jusqu'à la fin de la chaîne (délimitée, pour rappel, par $) La recherche démarre à la suite des caractères trouvés "je suis né en"
La regex (le contenu entre / et / est exécutée via exec(). Le contenu des parenthèses capturantes est enregistré temporairement au sein de l'objet RegExp. Le premier couple de parenthèses sera enregistré dans la propriété $1, le deuxième dans $2 ainsi de suite, jusqu'au neuvième, dans $9. Les couples sont numérotés suivant le sens de lecture, de gauche à droite. Pour accéder aux propriétés, il suffit de faire RegExp.$1, RegExp.$2, etc.
Voici un autre exemple décomposer une adresse e-mail pour récupérer les différentes parties :
var email = prompt("Entrez votre adresse e-mail :", "javascript@siteduzero.com");
if (/^([a-z0-9._-]+)@([a-z0-9._-]+).([a-z]{2,6})$/.test(email)) {
alert('Partie locale : ' + RegExp.$1 + 'Domaine : ' + RegExp.$2 + 'Extension : ' + RegExp.$3);
} else {alert('Adresse e-mail invalide !'); }
Toutes les parenthèses n'ont pas besoin de capturer quelque chose, si on vérifie une URL, on peut commencer la regex comme ceci : /(https¦http¦ftp¦steam):///
Mais si on n'a pas besoin de capturer ce texte on fait suivre ( de ?: -> /(?:https¦http¦ftp¦steam):///
De cette manière, cette parenthèse n'aura aucune incidence sur les propriétés $ de RegExp !
Utiliser les parenthèses capturantes pour extraire des informations et les réutiliser au sein de la chaîne de remplacement.
Une date au format américain : 05/26/2011 à convertir au format jour/mois/année.
var date = '05/26/2011';
date = date.replace(/^(d{2})/(d{2})/(d{4})$/, 'Le $2/$1/$3');
alert(date); // Le 26/05/2011
Chaque nombre est capturé avec une parenthèse dans $1, $2 et $3 qu'on réinjecte dans la chaîne de caractères dans un ordre différent : 2, 1, 3.
