Named capturing groups in JavaScript regex?

by

ECMAScript 2018 introduces named capturing groups into JavaScript regexes.

Example:

  const auth="Bearer AUTHORIZATION_TOKEN"
  const { groups: { token } } = /Bearer (?<token>[^ $]*)/.exec(auth)
  console.log(token) // "AUTHORIZATION_TOKEN"

If you need to support older browsers, you can do everything with normal (numbered) capturing groups that you can do with named capturing groups, you just need to keep track of the numbers – which may be cumbersome if the order of capturing group in your regex changes.

There are only two “structural” advantages of named capturing groups I can think of:

  1. In some regex flavors (.NET and JGSoft, as far as I know), you can use the same name for different groups in your regex (see here for an example where this matters). But most regex flavors do not support this functionality anyway.

  2. If you need to refer to numbered capturing groups in a situation where they are surrounded by digits, you can get a problem. Let’s say you want to add a zero to a digit and therefore want to replace (\d) with $10. In JavaScript, this will work (as long as you have fewer than 10 capturing group in your regex), but Perl will think you’re looking for backreference number 10 instead of number 1, followed by a 0. In Perl, you can use ${1}0 in this case.

Other than that, named capturing groups are just “syntactic sugar”. It helps to use capturing groups only when you really need them and to use non-capturing groups (?:...) in all other circumstances.

The bigger problem (in my opinion) with JavaScript is that it does not support verbose regexes which would make the creation of readable, complex regular expressions a lot easier.

Steve Levithan’s XRegExp library solves these problems.

More Related Contents:

  1. Javascript Array – Split string at numbers [closed]
  2. Why do regex constructors need to be double escaped?
  3. How can I match a whole word in JavaScript?
  4. How do I get the YouTube video ID from a URL?
  5. How can I match overlapping strings with regex?
  6. Javascript and regex: split string and keep the separator
  7. Javascript Regex: How to put a variable inside a regular expression? [duplicate]
  8. Converting user input string to regular expression
  9. Javascript RegExp + Word boundaries + unicode characters
  10. How to escape regular expression special characters using javascript? [duplicate]
  11. Fastest way to check a string contain another substring in JavaScript?
  12. Check if a string is html or not
  13. How to test valid UUID/GUID?
  14. Get URL from background-image Property
  15. Regular expression for all printable characters in JavaScript
  16. Regex currency validation
  17. Wrap tags around http text
  18. regex javascript to match both RGB and RGBA
  19. Why can’t I use accented characters next to a word boundary?
  20. Trim spaces from start and end of string
  21. How to convert a Title to a URL slug in jQuery?
  22. Optimize long lists of fixed string alternatives in regex
  23. Is there a way to measure string similarity in Google BigQuery
  24. Only numbers. Input number in React
  25. Extract parameter value from url using regular expressions
  26. Javascript – regex – word boundary (\b) issue
  27. Javascript Regular Expression for rgb values
  28. How to escape backslash in JavaScript?
  29. How to properly escape characters in regexp
  30. How to loop all the elements that match the regex?

Leave a Comment