Exemple JavaScript String.Replace () avec RegEx

Les expressions régulières (également appelées RegEx ou RegExp) sont un moyen puissant d'analyser le texte. Avec RegEx, vous pouvez faire correspondre des chaînes à des points qui correspondent à des caractères spécifiques (par exemple, JavaScript) ou à des modèles (par exemple, NumberStringSymbol - 3a &).

La .replaceméthode est utilisée sur des chaînes en JavaScript pour remplacer des parties de chaîne par des caractères. Il est souvent utilisé comme ceci:

const str = 'JavaScript'; const newStr = str.replace("ava", "-"); console.log(newStr); // J-Script 

Comme vous pouvez le voir ci-dessus, la méthode replace accepte deux arguments: la chaîne à remplacer et par quoi la chaîne serait remplacée.

Voici où Regex entre en jeu.

L'utilisation de .replaceci-dessus est limitée: les caractères à remplacer sont connus - "ava". Et si nous nous intéressons plutôt à un modèle? Peut-être, un nombre, deux lettres et le mot «toto» ou trois symboles utilisés ensemble?

La .replaceméthode utilisée avec RegExpeut y parvenir. RegExpeut être utilisé efficacement pour recréer des motifs. Donc, combiner cela avec .replacesignifie que nous pouvons remplacer des modèles et pas seulement des caractères exacts.

Comment utiliser RegExavec .replaceen JavaScript

Pour utiliser RegEx, le premier argument de replacesera remplacé par la syntaxe regex, par exemple /regex/. Cette syntaxe sert de modèle où toutes les parties de la chaîne qui y correspondent seront remplacées par la nouvelle sous-chaîne.

Voici un exemple:

// matches a number, some characters and another number const reg = /\d.*\d/ const str = "Java3foobar4Script" const newStr = str.replace(reg, "-"); console.log(newStr); // "Java-Script" 

La chaîne 3foobar4correspond à l'expression régulière /\d.*\d/, elle est donc remplacée.

Et si nous voulions effectuer des remplacements à plusieurs endroits?

Regexpropose déjà cela avec le gdrapeau (global), et le même peut être utilisé avec replace. Voici comment:

const reg = /\d{3}/g const str = "Java323Scr995ip4894545t"; const newStr = str.replace(reg, ""); console.log(newStr); // JavaScrip5t // 5 didn't pass the test :( 

L'expression régulière correspond à des parties de la chaîne qui sont exactement 3 nombres consécutifs. 323correspond, 995correspond, 489correspond et 454correspond. Mais le dernier 5ne correspond pas au modèle.

Le résultat est que JavaScrip5tmontre comment les modèles sont correctement mis en correspondance et remplace par la nouvelle sous-chaîne (une chaîne vide).

L'indicateur de cas - ipeut également être utilisé. Cela signifie que vous pouvez remplacer les modèles insensibles à la casse. Voici comment il est utilisé:

const reg1 = /\dA/ const reg2 = /\dA/i const str = "Jav5ascript" const newStr1 = str.replace(reg1, "--"); const newStr2 = str.replace(reg2, "--"); console.log(newStr1) // Jav5ascript console.log(newStr2) // Jav--script 

..5a..ne correspond pas à la première syntaxe car RegEx est par défaut sensible à la casse. Mais avec l'utilisation de l' iindicateur, comme vu dans la deuxième syntaxe, la chaîne est comme prévu - remplacée.

Comment utiliser Split avec des expressions régulières

splitutilise également RegEx. Ce qui signifie que vous pouvez diviser une chaîne non seulement au niveau des sous-chaînes qui correspondent aux caractères exacts, mais également aux modèles.

Voici un aperçu rapide:

const regex = /\d{2}a/; const str = "Hello54 How 64aare you"; console.log(str.split(regex)) // ["Hello54 How ", "are you"] 

La chaîne était splità 64acar cette sous-chaîne correspond à l'expression régulière spécifiée.

Notez que l'indicateur global - g- in splitn'est pas pertinent, contrairement à l' iindicateur et aux autres indicateurs. C'est parce que splitdivise la chaîne en plusieurs points auxquels l'expression régulière correspond.

Emballer

RegExrend replaceles chaînes JavaScript plus efficaces, puissantes et amusantes.

Vous n'êtes pas seulement limité aux caractères exacts, mais aux modèles et à plusieurs remplacements à la fois. Dans cet article, nous avons vu comment ils fonctionnent ensemble à l'aide de quelques exemples.

Vive RegEx?