Dans ce nouveau billet, nous allons passer en revue les différentes méthodes des objets String et RegExp qu’on va pouvoir utiliser avec nos expressions régulières afin d’effectuer des recherches ou des remplacements dans des chaines de caractères.
Nous allons pour le moment nous contenter d’utiliser ces méthodes avec des expressions régulières très simples. Nous apprendrons à créer des masques de recherche plus complexes dans les articles suivants.
La méthode match() de l’objet String
La méthode match() de l’objet String va nous permettre de rechercher la présence de caractères ou de séquences de caractères dans une chaine de caractères.
Pour cela, nous allons lui passer un objet représentant une expressions régulière en argument et match() va renvoyer un tableau avec les correspondances entre notre masque et la chaine de caractères c’est-à-dire un tableau contenant des caractères ou séquences de caractères trouvés dans la chaine de caractères qui satisfont à notre masque de recherche.
Dans le cas où aucune correspondance n’est trouvée, match() renverra la valeur null.
Notez que la méthode match() ne renvoie par défaut que la première correspondance trouvée. Pour que match() renvoie toutes les correspondances, il faudra utiliser l’option ou « drapeau » g qui permet d’effectuer des recherches globales.
Dans le cas où le drapeau g est utilisé, match() ne renverra alors pas les groupes capturants. Nous verrons plus tard exactement ce que sont les drapeaux et les groupes capturants.
<!DOCTYPE html>
<html>
<head>
<title>Cours JavaScript</title>
<meta charset="utf-8">
<link rel="stylesheet" href="cours.css">
<script src='cours.js' async></script>
</head>
<body>
<h1>Titre principal</h1>
<p>Un premier paragraphe</p>
<p id='p1'></p>
<p id='p2'></p>
<p id='p3'></p>
</body>
</html>
javscript
let chaine = 'Bonjour, je m\'appelle lawal et vous ?';
let masque1 = /lawal/;
/*Intervalle ou "classe" de caractères permettant de trouver n'importe quelle
*lettre majuscule de l'alphabet classique (sans les accents ou cédille)*/
let masque2 = /[A-Z]/;
let masque3 = /[A-Z]/g; //Ajout d'une option ou drapeau "global"
//Recherche "lawal" dans let chaine et renvoie la première correspondance
document.getElementById('p1').innerHTML = 'Trouvé : ' + chaine.match(masque1);
//Recherche toute majuscule dans chaine et renvoie la première correspondance
document.getElementById('p2').innerHTML = 'Trouvé : ' + chaine.match(masque2);
//Recherche toute majuscule dans chaine et renvoie toutes les correspondances
document.getElementById('p3').innerHTML = 'Trouvé : ' + chaine.match(masque3);
Ici, notre deuxième masque utilise un intervalle ou une classe de caractères. Cette expression régulière va permettre de rechercher toute lettre majuscule qui se situe dans l’intervalle « A-Z », c’est-à-dire en l’occurrence n’importe quelle lettre majuscule de l’alphabet (lettres accentuées ou avec cédille exclues). Nous étudierons les classes de caractères dans la prochaine article.
Notre troisième masque utilise en plus l’option ou le drapeau g qui permet d’effectuer une recherche dite globale et qui demande à match() de renvoyer toutes les correspondances. Notez que les drapeaux sont les seules entités dans les expressions régulières qui vont se placer à l’extérieur des délimiteurs.
La méthode search() de l’objet String
La méthode search() permet d’effectuer une recherche dans une chaine de caractères à partir d’une expression régulière fournie en argument.
Cette méthode va retourner la position à laquelle a été trouvée la première occurrence de l’expression recherchée dans une chaîne de caractères ou -1 si rien n’est trouvé.
<!DOCTYPE html>
<html>
<head>
<title>Cours JavaScript</title>
<meta charset="utf-8">
<link rel="stylesheet" href="cours.css">
<script src='cours.js' async></script>
</head>
<body>
<h1>Titre principal</h1>
<p>Un premier paragraphe</p>
<p id='p1'></p>
<p id='p2'></p>
<p id='p3'></p>
</body>
</html>
let chaine = 'Bonjour, je m\'appelle lawal et vous ?';
let masque1 = /lawal/;
let masque2 = /[A-Z]/;
let p1 = document.getElementById('p1');
let p2 = document.getElementById('p2');
let p3 = document.getElementById('p3');
p1.innerHTML = 'Trouvé en position : ' + chaine.search(masque1);
p2.innerHTML = 'Trouvé en position : ' + chaine.search(masque2);
La méthode replace() de l’objet String
La méthode replace() permet de rechercher un caractère ou une séquence de caractères dans une chaine et de les remplacer par d’autres caractère ou séquence. On va lui passer une expression régulière et une expression de remplacement en arguments.
Cette méthode renvoie une nouvelle chaine de caractères avec les remplacements effectués mais n’affecte pas la chaine de caractères de départ qui reste inchangée.
Tout comme pour match(), seule la première correspondance sera remplacée à moins d’utiliser l’option g dans notre expression régulière.
<!DOCTYPE html>
<html>
<head>
<title>Cours JavaScript</title>
<meta charset="utf-8">
<link rel="stylesheet" href="cours.css">
<script src='cours.js' async></script>
</head>
<body>
<h1>Titre principal</h1>
<p>Un premier paragraphe</p>
<p id='p1'></p>
<p id='p2'></p>
<p id='p3'></p>
</body>
</html>
let chaine = 'Bonjour, je m\'appelle lawal et vous ?';
let masque1 = /lawal/;
let masque2 = /e/;
let masque3 = /ou/g;
let p1 = document.getElementById('p1');
let p2 = document.getElementById('p2');
let p3 = document.getElementById('p3');
p1.innerHTML = chaine.replace(masque1, 'Mathilde');
p2.innerHTML = chaine.replace(masque2, 'E');
p3.innerHTML = chaine.replace(masque3, 'OU');
La méthode split() de l’objet String
La méthode split() permet de diviser ou de casser une chaine de caractères en fonction d’un séparateur qu’on va lui fournir en argument.
Cette méthode va retourner un tableau de sous chaines créé à partir de la chaine de départ. La chaine de départ n’est pas modifiée.
<!DOCTYPE html>
<html>
<head>
<title>Cours JavaScript</title>
<meta charset="utf-8">
<link rel="stylesheet" href="cours.css">
<script src='cours.js' async></script>
</head>
<body>
<h1>Titre principal</h1>
<p>Un premier paragraphe</p>
<p id='p1'></p>
<p id='p2'></p>
<p id='p3'></p>
</body>
</html>
let chaine = 'Bonjour, je m\'appelle lawal et vous ?';
let masque1 = /[ ,']/;
let masque2 = /e/;
let masque3 = /ou/g;
let p1 = document.getElementById('p1');
let p2 = document.getElementById('p2');
let p3 = document.getElementById('p3');
/*Dès qu'une espace, une virgule ou une apostrophe est rencontrée, la chaine de
*départ est découpée en une nouvelle sous chaine qui est placée dans un tableau*/
let sousChaine = chaine.split(masque1);
p1.innerHTML = 'Premier élément du tableau : ' + sousChaine[0] +
'<br>Deuxième élément du tableau : ' + sousChaine[1] +
'<br>Troisième élément du tableau : ' + sousChaine[2];
Dans l’exemple ci-dessus, on utilise un masque de recherche d’expression régulière comme séparateur. Ce masque permet de trouver une espace, une virgule ou une apostrophe qui vont donc servir de séparateur.
Dès que l’un de ces trois symbole est rencontré dans la chaine de départ, la méthode split() crée une nouvelle sous chaîne et la stocke dans un tableau.
Ici, le deuxième élément du tableau crée est vide car nous avons une virgule et une espace qui se suivent. En effet, split() découpe la chaine dès qu’elle rencontre la virgule puis elle la découpe à nouveau dès qu’elle rencontre l’espace. L’élément crée ne contient ici aucun caractère.
La méthode exec() de l’objet RegExp
La méthode exec() de RegExp va rechercher des correspondances entre une expression régulière et une chaine de caractères.
Cette méthode retourne un tableau avec les résultats si au moins une correspondance a été trouvée ou null dans le cas contraire.
Pour être tout à fait précis, le tableau renvoyé contient le texte correspondant en premier élément. Les éléments suivants sont composés du texte correspondant aux parenthèses capturantes éventuellement utilisées dans notre expression régulière (une nouvelle fois, nous verrons ce que sont les parenthèses capturantes plus tard).
<!DOCTYPE html>
<html>
<head>
<title>Cours JavaScript</title>
<meta charset="utf-8">
<link rel="stylesheet" href="cours.css">
<script src='cours.js' async></script>
</head>
<body>
<h1>Titre principal</h1>
<p>Un premier paragraphe</p>
<p id='p1'></p>
<p id='p2'></p>
<p id='p3'></p>
</body>
</html>
let chaine = 'Bonjour, je m\'appelle lawal et vous ?';
let masque1 = /lawal/;
let p1 = document.getElementById('p1');
let p2 = document.getElementById('p2');
let p3 = document.getElementById('p3');
let resultat = masque1.exec(chaine);
p1.textContent = 'Résultat : ' + resultat[0];
La méthode test() de l’objet RegExp
La méthode test() de RegExp va également rechercher des correspondances entre une expression régulière et une chaine de caractères mais va cette fois-ci renvoyer le booléen true si au moins une correspondance a été trouvée ou false dans le cas contraire.
let chaine = 'Bonjour, je m\'appelle lawal et vous ?';
let masque1 = /lawal/;
let p1 = document.getElementById('p1');
let p2 = document.getElementById('p2');
let p3 = document.getElementById('p3');
if(masque1.exec(chaine)){
p1.textContent = '"lawal" trouvé dans la chaine';
}
merci d'avoir lu et n'oubliez pas de partager autour de vous.. je suis disponible sur presaue tous les reseaux sociaux , envoyez moi un message des que vous pouvez
Top comments (0)