W3docs

Ancres ^ et $ des regex JavaScript

Les ancres sont des caractères spéciaux dans les expressions régulières qui permettent de cibler des positions dans une string plutôt que des caractères.

Introduction aux ancres en JavaScript

Les ancres sont des caractères spéciaux dans les expressions régulières qui permettent de faire correspondre des positions dans une string plutôt que des caractères réels. Les deux principales ancres en JavaScript sont ^ (caret) et $ (signe dollar). L'ancre ^ affirme que la correspondance doit commencer au début de la string, tandis que l'ancre $ affirme que la correspondance doit se produire à la fin de la string.

Une idée clé à saisir dès le départ : les ancres sont de largeur zéro. Elles correspondent à une position entre des caractères, et non à un caractère lui-même, donc elles ne consomment jamais de texte. C'est pourquoi /^abc$/ correspond à la string de trois caractères "abc" et non à une string de quatre ou cinq caractères — ^ et $ n'ajoutent aucune longueur à la correspondance. Cette même propriété vous permet d'utiliser une ancre dans replace pour insérer du texte tout au début ou à la fin d'une string sans rien supprimer :

javascript— editable

Cette page couvre la correspondance du début et de la fin d'une string, la combinaison des deux ancres pour une correspondance exacte sur la totalité de la string, la façon dont le flag m (multiligne) modifie leur comportement, et le fonctionnement des ancres avec test() et match().

L'ancre ^ : correspondance au début d'une string

L'ancre ^ est utilisée pour vérifier si une string commence par un motif spécifique.

Utiliser l'ancre ^

javascript— editable

Dans cet exemple, ^Hello garantit que la string commence par "Hello". La string 'Hello, world!' correspond au motif, mais 'Say Hello, world!' ne correspond pas car "Hello" n'est pas au début.

Exemple pratique : valider le début d'une adresse e-mail

javascript— editable

Cette regex vérifie si une adresse e-mail commence par un nom d'utilisateur valide. La string '[email protected]' correspond, et '[email protected]' correspond également, car toutes deux commencent par un motif de nom d'utilisateur valide avant le symbole @.

L'ancre $ : correspondance à la fin d'une string

L'ancre $ est utilisée pour vérifier si une string se termine par un motif spécifique.

Utiliser l'ancre $

javascript— editable

Dans cet exemple, world!$ garantit que la string se termine par "world!". La string 'Hello, world!' correspond au motif, mais 'Hello, world' ne correspond pas car il manque le point d'exclamation à la fin.

Exemple pratique : valider une extension de fichier

javascript— editable

Cette regex vérifie si un nom de fichier se termine par ".txt". La string 'document.txt' correspond, tandis que 'document.pdf' ne correspond pas.

Info

Les ancres (^ et $) dans les expressions régulières JavaScript permettent de faire correspondre précisément le début ou la fin d'une string, garantissant ainsi une validation et une manipulation de texte précises.

Combiner ^ et $ pour des correspondances exactes

En combinant ^ et $, vous pouvez créer une regex qui correspond à une string entière, du début à la fin.

Utiliser les deux ancres

javascript— editable

Dans cet exemple, ^Hello, world!$ garantit que la string entière correspond à "Hello, world!". Seule la string 'Hello, world!' correspond exactement.

Exemple pratique : valider un motif exact

javascript— editable

Cette regex s'assure que l'adresse e-mail est dans un format valide du début à la fin. Elle vérifie la présence d'un nom d'utilisateur valide, d'un symbole "@", d'un nom de domaine et d'un domaine de premier niveau.

Utiliser les ancres pour une validation précise

Les ancres sont particulièrement utiles pour valider des saisies où vous devez vous assurer que la string entière est conforme à un motif. Par exemple, utilisez ^ et $ pour valider des numéros de téléphone, des codes postaux ou tout autre format de saisie fixe.

Exemple : valider un numéro de téléphone américain

javascript— editable

Cette regex s'assure que le numéro de téléphone est au format (123) 456-7890. Elle utilise ^ pour marquer le début et $ pour marquer la fin, garantissant que la string entière correspond au motif spécifié.

Les ancres et le flag multiligne (m)

Par défaut, ^ et $ correspondent uniquement au tout début et à la toute fin de la string entière, même lorsque celle-ci contient des sauts de ligne. En ajoutant le flag m (multiligne), leur signification change : ^ et $ correspondent alors également au début et à la fin de chaque ligne.

javascript— editable

Sans m, /^.+$/g renvoie null car . ne correspond pas aux caractères de nouvelle ligne, donc aucune ligne unique ne s'étend sur toute la string de son début à sa fin. Avec m, chaque ligne est mise en correspondance indépendamment. Si vous travaillez avec des saisies multi-lignes, le flag m est presque toujours ce dont vous avez besoin — consultez Mode multiligne des ancres, flag "m" pour un examen approfondi.

Les ancres avec test() et match()

Les ancres se comportent de la même manière quelle que soit la méthode appelée ; la différence réside dans ce que chaque méthode retourne.

  • regexp.test(str) retourne un boolean — idéal pour la validation ("cette string commence-t-elle/se termine-t-elle correctement ?").
  • str.match(regexp) retourne le texte correspondant (ou un array avec le flag g), ou null en l'absence de correspondance — utile lorsque vous avez également besoin de la valeur capturée.
javascript— editable

Comme \d+$ est ancré à la fin, il capture le nombre final 42 et rien d'autre. Lorsque vous avez uniquement besoin d'une réponse oui/non, préférez test() ; utilisez match() lorsque vous avez besoin de récupérer la valeur.

Info

Si vous souhaitez faire correspondre un caractère spécifique à une frontière entre un caractère de mot et un caractère non-mot plutôt qu'au bord de la string, utilisez \b la frontière de mot plutôt que ^ ou $.

Conclusion

Les ancres sont des outils puissants dans les expressions régulières JavaScript qui permettent de faire correspondre des positions dans une string. En maîtrisant les ancres ^ et $, vous pouvez créer des motifs précis et efficaces pour valider et manipuler des strings. Que vous vous assuriez qu'une string commence ou se termine par un motif spécifique, ou que vous fassiez correspondre une string entière exactement, les ancres sont essentielles pour des opérations regex robustes.

Pratique

Pratique
Qu'est-ce qui est vrai concernant l'utilisation du caret (^) et du dollar ($) en JavaScript ?
Qu'est-ce qui est vrai concernant l'utilisation du caret (^) et du dollar ($) en JavaScript ?
Was this page helpful?