diff --git a/9-regular-expressions/17-regexp-methods/article.md b/9-regular-expressions/17-regexp-methods/article.md index a7847c0f6..4cfe6d9fb 100644 --- a/9-regular-expressions/17-regexp-methods/article.md +++ b/9-regular-expressions/17-regexp-methods/article.md @@ -1,30 +1,33 @@ -# Methods of RegExp and String +# Methodes des Expressions Rationnelles et des chaînes de caractères + +Dans cet article, nous aborderons différentes méthodes qui fonctionnent en profondeur avec des expressions rationnelles (regexps). -In this article we'll cover various methods that work with regexps in-depth. ## str.match(regexp) -The method `str.match(regexp)` finds matches for `regexp` in the string `str`. +La méthode `str.match(regexp)` trouve les correspondances de l'expression rationnelle `regexp` dans la chaîne de texte `str`. + -It has 3 modes: +Elle dispose de 3 options : -1. If the `regexp` doesn't have flag `pattern:g`, then it returns the first match as an array with capturing groups and properties `index` (position of the match), `input` (input string, equals `str`): +1. si l'expression rationnelle n'à pas de marqueur `pattern:g`, alors seul la première correspondance est renvoyée sous la forme d'un tableau avec le groupe capturé et ses propriétés : index (indice de la correspondance), et input (chaîne d'entrée équivalent à str): ```js run let str = "I love JavaScript"; let result = str.match(/Java(Script)/); - alert( result[0] ); // JavaScript (full match) - alert( result[1] ); // Script (first capturing group) + alert( result[0] ); // JavaScript (correspondance exacte) + alert( result[1] ); // Script (premier groupe capturant) alert( result.length ); // 2 // Additional information: - alert( result.index ); // 7 (match position) - alert( result.input ); // I love JavaScript (source string) + alert( result.index ); // 7 (indice de la chaîne de caractère où à été trouvée la correspondance) + alert( result.input ); // I love JavaScript (chaîne sur laquelle a été effectuée la recherche) ``` -2. If the `regexp` has flag `pattern:g`, then it returns an array of all matches as strings, without capturing groups and other details. +2. Si la `regexp` dispose d'un marqueur `pattern:g`, alors elle retourne un tableau de toutes les correspondances de texte, sans capturer les groupes ou les autres propriétés. + ```js run let str = "I love JavaScript"; @@ -34,9 +37,9 @@ It has 3 modes: alert( result.length ); // 1 ``` -3. If there are no matches, no matter if there's flag `pattern:g` or not, `null` is returned. +3. S'il n'y a pas de correspondance, qu'il y ait un marqueur `pattern:g` ou non, `null` est renvoyé. - That's an important nuance. If there are no matches, we don't get an empty array, but `null`. It's easy to make a mistake forgetting about it, e.g.: + C'est une nuance importante. Si il n'y a pas de correspondance, nous ne récupérons pas de tableau vide, mais `null`. Il n'est pas rare de faire une erreur en oubliant ce détail, e.g.: ```js run let str = "I love JavaScript"; @@ -47,7 +50,7 @@ It has 3 modes: alert(result.length); // Error: Cannot read property 'length' of null ``` - If we want the result to be an array, we can write like this: + Si nous voulons que le résultat soit un tableau, nous pouvons écrire de cette façon: ```js let result = str.match(regexp) || []; @@ -57,17 +60,17 @@ It has 3 modes: [recent browser="new"] -The method `str.matchAll(regexp)` is a "newer, improved" variant of `str.match`. +La méthode `str.matchAll(regexp)` est une variante "améliorée" de `str.match`. -It's used mainly to search for all matches with all groups. +Elle est principalement utilisée pour rechercher toutes les correspondances au sein de chaque groupe. -There are 3 differences from `match`: +Il y a 3 différences avec `match`: -1. It returns an iterable object with matches instead of an array. We can make a regular array from it using `Array.from`. -2. Every match is returned as an array with capturing groups (the same format as `str.match` without flag `pattern:g`). -3. If there are no results, it returns not `null`, but an empty iterable object. +1. Elle retourne un objet iterable avec les correspondances au lieu d'un tableau. Nous pouvons le transformer en un tableau en utilisant la méthode `Array.from`. +2. Toutes les correspondances sont retournées dans un tableau incluant les groupes capturants (sous le même format que `str.match` sans le marqueur `pattern:g`). +3. Si aucun résultat, `null` n'est pas renvoyé, mais un objet itérable vide. -Usage example: +Exemple d'utilisation: ```js run let str = '

Hello, world!

'; @@ -75,9 +78,9 @@ let regexp = /<(.*?)>/g; let matchAll = str.matchAll(regexp); -alert(matchAll); // [object RegExp String Iterator], not array, but an iterable +alert(matchAll); // [object RegExp String Iterator], pas un tableau, mais un itérateur -matchAll = Array.from(matchAll); // array now +matchAll = Array.from(matchAll); // maintenant un tableau let firstMatch = matchAll[0]; alert( firstMatch[0] ); //

@@ -86,19 +89,19 @@ alert( firstMatch.index ); // 0 alert( firstMatch.input ); //

Hello, world!

``` -If we use `for..of` to loop over `matchAll` matches, then we don't need `Array.from` any more. +Si nous utilisons `for..of` pour boucler sur les résultats de `matchAll`, alors il n'est pas nécessaire d'utiliser `Array.from`. ## str.split(regexp|substr, limit) -Splits the string using the regexp (or a substring) as a delimiter. +Divise la chaîne de caractères en utilisant la regexp (ou une sous-chaîne de caractères) comme délimiteur. -We can use `split` with strings, like this: +Nous pouvons utiliser `split` avec une chaîne de caractères comme ceci : ```js run alert('12-34-56'.split('-')) // array of [12, 34, 56] ``` -But we can split by a regular expression, the same way: +Mais nous pouvons aussi diviser une chaîne de texte en utilisant une expression rationnelle: ```js run alert('12, 34, 56'.split(/,\s*/)) // array of [12, 34, 56] @@ -106,77 +109,77 @@ alert('12, 34, 56'.split(/,\s*/)) // array of [12, 34, 56] ## str.search(regexp) -The method `str.search(regexp)` returns the position of the first match or `-1` if none found: +La méthode `str.search(regexp)` renvoie l'indice du premier motif correspondant, ou `-1` si aucune correspondance n'est trouvée: ```js run let str = "A drop of ink may make a million think"; -alert( str.search( /ink/i ) ); // 10 (first match position) +alert( str.search( /ink/i ) ); // 10 (indice du premier motif correspondant) ``` -**The important limitation: `search` only finds the first match.** +**Limitation importante: `search` renvoie uniquement la première correspondance.** -If we need positions of further matches, we should use other means, such as finding them all with `str.matchAll(regexp)`. +Si nous avons besoin de l'indice ou de plus de correspondances, nous devrions utiliser d'autres méthodes, comme les trouver tous avec `str.matchAll(regexp)`. ## str.replace(str|regexp, str|func) -This is a generic method for searching and replacing, one of most useful ones. The swiss army knife for searching and replacing. +Il s'agit d'une méthode générique pour chercher et remplacer une chaîne de caractères, l'une des plus utiles. Le couteau suisse pour chercher et remplacer. -We can use it without regexps, to search and replace a substring: +Nous pouvons l'utiliser sans regexps, pour chercher et remplacer une sous-chaîne de caractères: ```js run // replace a dash by a colon alert('12-34-56'.replace("-", ":")) // 12:34-56 ``` -There's a pitfall though. +Toutefois, il y a un piège. -**When the first argument of `replace` is a string, it only replaces the first match.** +**Quand le premier argument de `replace` est une chaîne de caractères, elle ne remplace que la première occurence.** -You can see that in the example above: only the first `"-"` is replaced by `":"`. +Vous pouvez constater dans l'exemple ci-dessous que seul le premier `"-"` est remplacé par `":"`. -To find all hyphens, we need to use not the string `"-"`, but a regexp `pattern:/-/g`, with the obligatory `pattern:g` flag: +Pour trouver tous les traits d'unions, nous devons utiliser non pas le caractère `"-"`, mais une expression rationnelle `pattern:/-/g`, avec obligatoirement le marqueur `pattern:g`; ```js run -// replace all dashes by a colon +// remplace tous les tirets par deux-points alert( '12-34-56'.replace( *!*/-/g*/!*, ":" ) ) // 12:34:56 ``` -The second argument is a replacement string. We can use special character in it: +Le second argument correspond au texte de remplacement. Il est possible d'utiliser des modèles de remplacement spéciaux: | Symbols | Action in the replacement string | |--------|--------| -|`$&`|inserts the whole match| -|$`|inserts a part of the string before the match| -|`$'`|inserts a part of the string after the match| -|`$n`|if `n` is a 1-2 digit number, inserts the contents of n-th capturing group, for details see [](info:regexp-groups)| -|`$`|inserts the contents of the parentheses with the given `name`, for details see [](info:regexp-groups)| -|`$$`|inserts character `$` | +|`$&`|insère la chaine de caractère en correspondance| +|$`|Insère la partie de la chaîne de caractère qui précède la sous-chaîne en correspondance| +|`$'`|insère la partie de la chaîne de caractère qui suit la sous-chaîne en correspondance| +|`$n`|si `n` est un nombre à 1 ou 2 chiffres, insère la n-ième chaîne de sous-correspondance entre parenthèses, pour plus de détails voir [](info:regexp-groups)| +|`$`|insère la chaîne de caractère du `name` correspondant à celui entre parenthèse, pour plus de détails voir [](info:regexp-groups)| +|`$$`|insère un caractère `$` | -For instance: +Par exemple: ```js run let str = "John Smith"; -// swap first and last name +// inverser le prénom et nom de famille alert(str.replace(/(john) (smith)/i, '$2, $1')) // Smith, John ``` -**For situations that require "smart" replacements, the second argument can be a function.** +**Si le contexte nécessite un remplacement "intelligent", le second argument peut être une fonction.** -It will be called for each match, and the returned value will be inserted as a replacement. +Elle sera appelée pour chaque correspondance, et la valeur de retour sera insérée comme remplacement. -The function is called with arguments `func(match, p1, p2, ..., pn, offset, input, groups)`: +La fonction est appelée avec des arguments `func(match, p1, p2, ..., pn, offset, input, groups)`: -1. `match` -- the match, -2. `p1, p2, ..., pn` -- contents of capturing groups (if there are any), -3. `offset` -- position of the match, -4. `input` -- the source string, -5. `groups` -- an object with named groups. +1. `match` -- La chaîne de caractère en correspondance, +2. `p1, p2, ..., pn` -- contenu des groupes capturants (s'il y en a), +3. `offset` -- indice de la sous-chaîne correspondante, +4. `input` -- la chaîne de texte initiale, +5. `groups` -- un objet contenant les groupes nommés. -If there are no parentheses in the regexp, then there are only 3 arguments: `func(str, offset, input)`. +Si la regexp ne comporte pas de parenthèses, alors la fonction ne contient que 3 arguments: `func(str, offset, input)`. -For example, let's uppercase all matches: +Par exemple, pour convertir les chaînes de caractères correspondantes en majuscule: ```js run let str = "html and css"; @@ -186,13 +189,13 @@ let result = str.replace(/html|css/gi, str => str.toUpperCase()); alert(result); // HTML and CSS ``` -Replace each match by its position in the string: +Remplace chaque résultat en utilisant son indice dans la chaîne de caractères: ```js run alert("Ho-Ho-ho".replace(/ho/gi, (match, offset) => offset)); // 0-3-6 ``` -In the example below there are two parentheses, so the replacement function is called with 5 arguments: the first is the full match, then 2 parentheses, and after it (not used in the example) the match position and the source string: +Dans l'exemple ci-dessous, il y a 2 groupes entre parenthèses. La fonction de remplacement est alors appelée avec 5 arguments: le premier est la correspondance complète, puis chacun des groupes entre parenthèses et enfin (non présent dans l'exemple) l'indice de la correspondance et la chaîne de caractères initiale: ```js run let str = "John Smith"; @@ -202,7 +205,7 @@ let result = str.replace(/(\w+) (\w+)/, (match, name, surname) => `${surname}, $ alert(result); // Smith, John ``` -If there are many groups, it's convenient to use rest parameters to access them: +Si il y a de nombreux groupes entre parenthèses, il peut être pratique d'utiliser les paramètres du reste pour y accéder: ```js run let str = "John Smith"; @@ -212,7 +215,7 @@ let result = str.replace(/(\w+) (\w+)/, (...match) => `${match[2]}, ${match[1]}` alert(result); // Smith, John ``` -Or, if we're using named groups, then `groups` object with them is always the last, so we can obtain it like this: +Ou, si nous utilisons des groupes nommés, alors l'objet `groups` est toujours placé en dernier, et nous pouvons l'obtenir de cette façon: ```js run let str = "John Smith"; @@ -226,25 +229,25 @@ let result = str.replace(/(?\w+) (?\w+)/, (...match) => { alert(result); // Smith, John ``` -Using a function gives us the ultimate replacement power, because it gets all the information about the match, has access to outer variables and can do everything. +Les fonctions représentent le pouvoir ultime pour effectuer un remplacement. Elles recupèrent toutes les informations des correspondances, ont accès aux variables externes et sont capable de tout faire. ## regexp.exec(str) -The method `regexp.exec(str)` method returns a match for `regexp` in the string `str`. Unlike previous methods, it's called on a regexp, not on a string. +La méthode `regexp.exec(str)` renvoie une correspondance for `regexp` dans la chaîne de caractères `str`. À l'inverse de la méthode précédente, elle est appelée sur une expression rationnelle et non une châine de caractères. -It behaves differently depending on whether the regexp has flag `pattern:g`. +Elle se comporte différement selon que la regexp dispose d'un marqueur `pattern:g` ou non. -If there's no `pattern:g`, then `regexp.exec(str)` returns the first match exactly as `str.match(regexp)`. This behavior doesn't bring anything new. +Si `pattern:g` n'est pas présent, alors `regexp.exec(str)` renvoie la première correspondance tel que le ferait `str.match(regexp)`. Ce comportement n'apporte rien de nouveau. -But if there's flag `pattern:g`, then: -- A call to `regexp.exec(str)` returns the first match and saves the position immediately after it in the property `regexp.lastIndex`. -- The next such call starts the search from position `regexp.lastIndex`, returns the next match and saves the position after it in `regexp.lastIndex`. -- ...And so on. -- If there are no matches, `regexp.exec` returns `null` and resets `regexp.lastIndex` to `0`. +Mais si `pattern:g` est utilisé, alors: +- Un appel à `regexp.exec(str)` renvoie la première correspondance et sauvegarde l'indice situé juste après, accessible via la propriété `regexp.lastIndex`. +- l'appel suivant à la fonction commence la recherche depuis l'indice contenu dans `regexp.lastIndex`. La correspondance suivante est renvoyé et l'indice positionné après est sauvegardé dans `regexp.lastIndex`. +- ...Et ainsi de suite. +- Si aucune correspondance n'est trouvée, `regexp.exec`renvoie `null` et `regexp.lastIndex` est réinitialisé à `0`. -So, repeated calls return all matches one after another, using property `regexp.lastIndex` to keep track of the current search position. +Donc, un appel répété à cette fonction renvoie toutes les correspondances l'une après l'autre, utilisant la propriété `regexp.lastIndex` pour se souvenir de l'indice courant à partir duquel la recherche est effectuée. -In the past, before the method `str.matchAll` was added to JavaScript, calls of `regexp.exec` were used in the loop to get all matches with groups: +Avant que la méthode `str.matchAll` ait été ajoutée à Javascript, des appels à `regexp.exec` étaient utilisés dans une boucle afin d'obtenir toutes les correspondances: ```js run let str = 'More about JavaScript at https://javascript.info'; @@ -254,56 +257,56 @@ let result; while (result = regexp.exec(str)) { alert( `Found ${result[0]} at position ${result.index}` ); - // Found JavaScript at position 11, then + // Found JavaScript at position 11, puis // Found javascript at position 33 } ``` -This works now as well, although for newer browsers `str.matchAll` is usually more convenient. +Cela fonctionne également très bien, bien que sur les navigateurs les plus récents `str.matchAll` est généralement plus pratique. -**We can use `regexp.exec` to search from a given position by manually setting `lastIndex`.** +**Nous pouvons utiliser `regexp.exec` pour rechercher à partir d'un indice donné en réglant manuellement la valeur de `lastIndex`.** -For instance: +Par exemple: ```js run let str = 'Hello, world!'; -let regexp = /\w+/g; // without flag "g", lastIndex property is ignored -regexp.lastIndex = 5; // search from 5th position (from the comma) +let regexp = /\w+/g; // sans le marqueur "g", la propriété lastIndex est ignorée +regexp.lastIndex = 5; // commence la recherche à partir de la 5ème position (à partir de la virgule) alert( regexp.exec(str) ); // world ``` -If the regexp has flag `pattern:y`, then the search will be performed exactly at the position `regexp.lastIndex`, not any further. +Si la regexp utilise le marqueur `pattern:y`, alors la recherche s'effectuera à l'indice précis de `regexp.lastIndex`, pas plus loin. -Let's replace flag `pattern:g` with `pattern:y` in the example above. There will be no matches, as there's no word at position `5`: +Remplaçons le marqueur `pattern:g` par `pattern:y` dans l'exemple précédent. Aucune correspondance n'est trouvée, car il n'y a aucun mot à l'indice `5`: ```js run let str = 'Hello, world!'; let regexp = /\w+/y; -regexp.lastIndex = 5; // search exactly at position 5 +regexp.lastIndex = 5; // cherche exactement à l'indice 5 alert( regexp.exec(str) ); // null ``` -That's convenient for situations when we need to "read" something from the string by a regexp at the exact position, not somewhere further. +C'est pratique dans une situation où nous cherchons uniquement à lire quelque chose au sein d'un texte avec une regexp à un indice spécifique, en occultant le reste. ## regexp.test(str) -The method `regexp.test(str)` looks for a match and returns `true/false` whether it exists. +La méthode `regexp.test(str)` vérifie qu'une correspondance existe et renvoie `true/false` selon le cas. -For instance: +Par exemple: ```js run let str = "I love JavaScript"; -// these two tests do the same +// Ces deux tests réalisent exactement la même chose alert( *!*/love/i*/!*.test(str) ); // true alert( str.search(*!*/love/i*/!*) != -1 ); // true ``` -An example with the negative answer: +Un exemple avec un retour négatif: ```js run let str = "Bla-bla-bla"; @@ -312,33 +315,33 @@ alert( *!*/love/i*/!*.test(str) ); // false alert( str.search(*!*/love/i*/!*) != -1 ); // false ``` -If the regexp has flag `pattern:g`, then `regexp.test` looks from `regexp.lastIndex` property and updates this property, just like `regexp.exec`. +Si la regexp à le marqueur `pattern:g`, alors `regexp.test` verifiera la propriété `regexp.lastIndex` et mettra à jours cette propriété, tout comme `regexp.exec`. -So we can use it to search from a given position: +On peut donc l'utiliser pour effectuer une recherche à partir d'un indice donnée: ```js run let regexp = /love/gi; let str = "I love JavaScript"; -// start the search from position 10: +// commence la recherche à partir de l'indice 10: regexp.lastIndex = 10; -alert( regexp.test(str) ); // false (no match) +alert( regexp.test(str) ); // false (pas de correspondance) ``` -````warn header="Same global regexp tested repeatedly on different sources may fail" -If we apply the same global regexp to different inputs, it may lead to wrong result, because `regexp.test` call advances `regexp.lastIndex` property, so the search in another string may start from non-zero position. +````warn header="Une même expression rationnelle testée de manière répétée sur différentes sources peut échouer" +Appliquer la même expression rationnelle globale sur différentes entrées peut conduire à de mauvais résultats, car l'appel à `regexp.test` modifie la propriété `regexp.lastIndex`, par conséquent la recherche sur une autre chaîne de caractères risque d'être lancer à partir d'un autre indice que `0`. -For instance, here we call `regexp.test` twice on the same text, and the second time fails: +Par exemple, nous appelons ici `regexp.test` à deux reprises sur la même chaîne de texte, and le second appel échoue: ```js run -let regexp = /javascript/g; // (regexp just created: regexp.lastIndex=0) +let regexp = /javascript/g; // (création d'une nouvelle regexp: regexp.lastIndex=0) -alert( regexp.test("javascript") ); // true (regexp.lastIndex=10 now) +alert( regexp.test("javascript") ); // true (maintenant regexp.lastIndex=10) alert( regexp.test("javascript") ); // false ``` -That's exactly because `regexp.lastIndex` is non-zero in the second test. +C'est exactement parce que `regexp.lastIndex` n'est pas `0` lors du second test. -To work around that, we can set `regexp.lastIndex = 0` before each search. Or instead of calling methods on regexp, use string methods `str.match/search/...`, they don't use `lastIndex`. +Afin de contourner cela, nous pouvons réinitialiser `regexp.lastIndex = 0` avant chaque recherche. Ou, au lieu d'appeler la méthode sur une regexp, nous pouvons utiliser les méthodes de l'objet String `str.match/search/...`, qui n'utilisent pas `lastIndex`. ````