Un guide du débutant sur les expressions régulières en JavaScript

Tous ceux qui utilisent JavaScript doivent gérer les chaînes à un moment donné. Parfois, vous stockez simplement la chaîne dans une autre variable et la transmettez. D'autres fois, vous devez l'inspecter et voir s'il contient une sous-chaîne spécifique.

Cependant, les choses ne sont pas toujours faciles. Parfois, vous ne recherchez pas une sous-chaîne spécifique, mais plutôt un ensemble de sous-chaînes qui suivent un modèle spécifique.

Supposons que vous deviez remplacer toutes les occurrences de « Pommes » dans une chaîne par « pommes ». Vous pouvez simplement utiliser theMainString.replace("Apples", "apples"). Bon et facile.

Supposons maintenant que vous deviez également remplacer "appLes" par "apples". De même, "appLES" devrait devenir "pommes". Fondamentalement, toutes les variantes de cas de « Apple » doivent être remplacées par « Apple ». Dans ce cas, passer une simple chaîne de caractères en argument n’est plus pratique ni efficace.

C'est là qu'interviennent les expressions régulières - vous pouvez simplement utiliser l'indicateur insensible à la casse i et en finir avec cela. Avec cet indicateur, peu importe que la chaîne d'origine contienne "Apples", "APPles", "ApPlEs" ou "Apples". Chaque instance du mot sera remplacée par « pommes ».

Tout comme l'indicateur insensible à la casse, les expressions régulières offrent de nombreuses autres fonctionnalités, qui seront abordées dans ce tutoriel.

Utiliser des expressions régulières en JavaScript

Vous devez utiliser une syntaxe légèrement différente pour indiquer les expressions régulières dans différentes méthodes String. Contrairement à une simple chaîne entourée de guillemets, une expression régulière consiste en un motif entouré de barres obliques. Tous les indicateurs que vous utilisez dans l'expression régulière seront ajoutés après la deuxième barre oblique.

Retour à l'exemple précédent, voici à quoi ressemble la méthode replace() en utilisant des expressions régulières et une simple chaîne.

"I ate Apples".replace("Apples", "apples");
// I ate apples

"I ate Apples".replace(/Apples/i, "apples");
// I ate apples

"I ate aPPles".replace("Apples", "apples");
// I ate aPPles

"I ate aPPles".replace(/Apples/i, "apples");
// I ate apples

Comme vous pouvez le constater, l'expression régulière fonctionne dans les deux cas. Nous allons maintenant en apprendre davantage sur les drapeaux et les caractères spéciaux qui composent les modèles dans les expressions régulières.

Backslash dans les expressions régulières

Vous pouvez convertir des caractères normaux en caractères spéciaux en ajoutant une barre oblique inverse devant eux. De même, vous pouvez convertir des caractères spéciaux en caractères normaux en ajoutant une barre oblique inverse devant eux.

Par exemple, d 不是特殊字符。然而， d 用于匹配字符串中的数字字符。同样，D 也不是特殊字符，但 D est utilisé pour faire correspondre les caractères non numériques dans une chaîne.

Les caractères numériques incluent 0, 1, 2, 3, 4, 5, 6, 7, 8 et 9. Lorsque vous utilisez d 时，它将匹配以下任何一个九个字符。当您在正则表达式中使用 D dans une expression régulière, il correspondra à tous les caractères non numériques.

L'exemple ci-dessous devrait clarifier les choses.

"L8".replace(/\d/i, "E");
// LE

"L8".replace(/\D/i, "E");
// E8

"LLLLL8".replace(/\D/i, "E");
// ELLLL8

A noter que dans le troisième cas, seul le premier caractère correspondant est remplacé. Vous pouvez également utiliser des indicateurs pour remplacer toutes les correspondances. Nous en apprendrons plus sur ces drapeaux plus tard.

Tout comme d 和 D, il existe d'autres séquences de caractères spéciaux.

1. Vous pouvez utiliser w pour faire correspondre n'importe quel caractère "mot" dans une chaîne. Ici, les caractères des mots font référence à A-Z, a-z, 0-9 et _. Donc, fondamentalement, il correspondra à tous les chiffres, à toutes les lettres minuscules et majuscules et aux traits de soulignement.
2. Vous pouvez utiliser W pour faire correspondre n'importe quel caractère autre qu'un mot dans une chaîne. Il fera correspondre des caractères comme %, $, #, $, etc.
3. Vous pouvez utiliser s 来匹配单个空白字符，其中包括空格、制表符、换页符和换行符。同样，您可以使用 S pour faire correspondre tous les autres caractères à l'exception des espaces.
4. Vous pouvez également utiliser f、n、r、t 和 v pour représenter respectivement le saut de formulaire, le saut de ligne, le retour chariot, la tabulation horizontale et la tabulation verticale.

Parfois, vous rencontrerez une situation où vous devrez remplacer un mot par une alternative, mais seulement s'il ne fait pas fait partie d'un mot plus large. Par exemple, considérons la phrase suivante :

"Beaucoup de photos d'ananas postées sur l'application".

Dans cet exemple, nous souhaitons remplacer le mot « app » par « board ». Cependant, utiliser un simple modèle regex transformerait "apple" en "boardle" et la phrase finale deviendrait :

"Il existe de nombreuses images de planches de pin publiées sur l'application".

在这种情况下，您可以使用另一个特殊字符序列：\b。这会检查单词边界。单词边界是通过使用任何非单词字符（如空格、“$”、“%”、“#”等）形成的。不过请注意，它还包括重音字符，如“ü”。

"A lot of pineapple images were posted on the app".replace(/app/, "board");
// A lot of pineboardle images were posted on the app

"A lot of pineapple images were posted on the app".replace(/\bapp/, "board");
// A lot of pineapple images were posted on the board

同样，您可以使用 \B 来匹配非单词边界。例如，您可以使用 \B 仅匹配位于另一个单词（如“pineapple”）内的“app”。

匹配模式“n”次

您可以使用 ^ 告诉 JavaScript 仅查看字符串的开头以进行匹配。同样，您可以使用 $ 仅查看字符串末尾的匹配项。

您可以使用 * 来匹配前面的表达式 0 次或多次。例如，/Ap*/ 将匹配 A、Ap、App、Appp，等等。

"Apppppples".replace(/Ap*/, "App");
// Apples

"Ales".replace(/Ap*/, "App");
// Apples

"Appppples".replace(/Ap{2}/, "Add");
// Addppples

"Appppples".replace(/Ap{2,}/, "Add");
// Addles

"Appppples".replace(/Ap{2,4}/, "Add");
// Addples

"I like Apple".replace(/(\w{5,})/, '$1s');
// I like Apples

"I like Banana".replace(/(\w{5,})/, '$1s');
// I like Bananas

"I am looking for John and Jason".replace(/(\w+)\sand\s(\w+)/, '$2 and $1');
// I am looking for Jason and John

"I ate apples, you ate apples".replace(/apples/, "mangoes");
// "I ate mangoes, you ate apples"

"I ate apples, you ate apples".replace(/apples/g, "mangoes");
// "I ate mangoes, you ate mangoes"

"I ate apples, you ate APPLES".replace(/apples/, "mangoes");
// "I ate mangoes, you ate APPLES"

"I ate apples, you ate APPLES".replace(/apples/gi, "mangoes");
// "I ate mangoes, you ate mangoes"


var stickyRegex = /apples/y;
stickyRegex.lastIndex = 3;
"I ate apples, you ate apples".replace(stickyRegex, "mangoes");
// "I ate apples, you ate apples"

var stickyRegex = /apples/y;
stickyRegex.lastIndex = 6;
"I ate apples, you ate apples".replace(stickyRegex, "mangoes");
// "I ate mangoes, you ate apples"

var stickyRegex = /apples/y;
stickyRegex.lastIndex = 8;
"I ate apples, you ate apples".replace(stickyRegex, "mangoes");
// "I ate apples, you ate apples"