Named capturing groups in JavaScript regex

Question

As far as I know there is no such thing as named capturing groups in JavaScript  What is the alternative way to get similar functionality

User · Answer

You can use XRegExp  an augmented  extensible  cross-browser implementation of regular expressions  including support for additional syntax  flags  and methods    Adds new regex and replacement text syntax  including comprehensive support for named capture  Adds two new regex flags  s  to make dot match all characters  aka dotall or singleline mode   and x  for free-spacing and comments  aka extended mode   Provides a suite of functions and methods that make complex regex processing a breeze  Automagically fixes the most commonly encountered cross-browser inconsistencies in regex behavior and syntax  Lets you easily create and use plugins that add new syntax and flags to XRegExp s regular expression language

User · Answer

In ES6 you can use array destructuring to catch your groups   let text    27 months   let regex      d   s  days  months  years     let    count  unit    regex exec text             count      27     unit      months    Notice     the first comma in the last let skips the first value of the resulting array  which is the whole matched string the       after  exec   will prevent a destructuring error when there are no matches  because  exec   will return null

User · Answer

As Tim Pietzcker said ECMAScript 2018 introduces named capturing groups into JavaScript regexes  But what I did not find in the above answers was how to use the named captured group in the regex itself   you can use named captured group with this syntax   k lt name gt   for example  var regexObj       lt year gt  d 4  -   lt day gt  d 2  -   lt month gt  d 2   year is  k lt year gt     and as Forivin said you can use captured group in object result as follow   let result   regexObj exec  2019-28-06 year is 2019       result groups year      2019      result groups month      06      result groups day      28      x000D   x000D    var regexObj       lt year gt  d 4  -   lt day gt  d 2  -   lt month gt  d 2   year is  k lt year gt  mgi  x000D   x000D  function check    x000D      var inp   document getElementById  tinput   value  x000D      let result   regexObj exec inp   x000D      document getElementById  year   innerHTML   result groups year  x000D      document getElementById  month   innerHTML   result groups month  x000D      document getElementById  day   innerHTML   result groups day  x000D    x000D  td  th  x000D    border  solid 2px  ccc  x000D    x000D   lt input id  tinput  type  text  value  2019-28-06 year is 2019   gt  x000D   lt br  gt  x000D   lt br  gt  x000D   lt span gt Pattern      lt year gt  d 4  -   lt day gt  d 2  -   lt month gt  d 2   year is  k lt year gt    x000D   lt br  gt  x000D   lt br  gt  x000D   lt button onclick  check    gt Check  lt  button gt  x000D   lt br  gt  x000D   lt br  gt  x000D   lt table gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th gt  x000D           lt span gt Year lt  span gt  x000D         lt  th gt  x000D         lt th gt  x000D           lt span gt Month lt  span gt  x000D         lt  th gt  x000D         lt th gt  x000D           lt span gt Day lt  span gt  x000D         lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt  x000D           lt span id  year  gt  lt  span gt  x000D         lt  td gt  x000D         lt td gt  x000D           lt span id  month  gt  lt  span gt  x000D         lt  td gt  x000D         lt td gt  x000D           lt span id  day  gt  lt  span gt  x000D         lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

While you can t do this with vanilla JavaScript  maybe you can use some Array prototype function like Array prototype reduce to turn indexed matches into named ones using some magic   Obviously  the following solution will need that matches occur in order    x000D   x000D      text Contains the text to match x000D      regex A regular expression object  f e        x000D      matchNames An array of literal strings where each item x000D                 is the name of each group x000D  function namedRegexMatch text  regex  matchNames    x000D    var matches   regex exec text   x000D   x000D    return matches reduce function result  match  index    x000D      if  index  gt  0  x000D           This substraction is required because we count  x000D           match indexes from 1  because 0 is the entire matched string x000D        result matchNames index - 1     match  x000D   x000D      return result  x000D            x000D    x000D   x000D  var myString    Hello Alex  I am John   x000D   x000D  var namedMatches   namedRegexMatch  x000D    myString  x000D     Hello   a-z     I am   a-z    i   x000D      firstPersonName    secondPersonName   x000D     x000D   x000D  alert JSON stringify namedMatches    x000D   x000D   x000D

User · Answer

ECMAScript 2018 introduces named capturing groups into JavaScript regexes   Example     const auth    Bearer AUTHORIZATION TOKEN    const   groups    token        Bearer    lt token gt          exec auth    console log token      Prints 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     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  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

User · Answer

Another possible solution  create an object containing the group names and indexes   var regex   new RegExp               var regexGroups     FirstName  1  LastName  2      Then  use the object keys to reference the groups   var m   regex exec  John Smith    var f   m regexGroups FirstName     This improves the readability quality of the code using the results of the regex  but not the readability of the regex itself

User · Answer

Don t have ECMAScript 2018   My goal was to make it work as similar as possible to what we are used to with named groups  Whereas in ECMAScript 2018 you can place   lt groupname gt  inside the group to indicate a named group  in my solution for older javascript  you can place      lt groupname gt   inside the group to do the same thing  So it s an extra set of parenthesis and an extra     Pretty close   I wrapped all of it into a string prototype function  Features   works with older javascript no extra code pretty simple to use Regex still works groups are documented within the regex itself group names can have spaces returns object with results   Instructions   place      groupname   inside each group you want to name remember to eliminate any non-capturing groups    by putting    at the beginning of that group  These won t be named    arrays js       pattern - includes injections of      groupname   for each group      returns - an object with a property for each group having the group s match as the value  String prototype matchWithGroups   function  pattern      var matches   this match pattern     return pattern      get the pattern as a string    toString        suss out the groups    match   lt       gt  g       remove the braces    map function group        return group match   lt      gt    1             create an object with a property for each group having the group s match as the value     reduce function acc  curr  index  arr        acc curr    matches index   1       return acc                     usage  function testRegGroups       var s    123 Main St     var pattern          lt house number gt   d   s      lt street name gt   w   s      lt street type gt   w       var o   s matchWithGroups pattern        house number   123    street name   Main    street type   St     var j   JSON stringify o     var housenum   o  house number       123     result of o       house number    123      street name    Main      street type    St

User · Answer

There is a node js library called named-regexp that you could use in your node js projects  on in the browser by packaging the library with browserify or other packaging scripts   However  the library cannot be used with regular expressions that contain non-named capturing groups   If you count the opening capturing braces in your regular expression you can create a mapping between named capturing groups and the numbered capturing groups in your regex and can mix and match freely  You just have to remove the group names before using the regex  I ve written three functions that demonstrate that  See this gist  https   gist github com gbirke 2cc2370135b665eee3ef

User · Answer

Naming captured groups provide one thing  less confusion with complex regular expressions    It really depends on your use-case but maybe pretty-printing your regex could help    Or you could try and define constants to refer to your captured groups    Comments might then also help to show others who read your code  what you have done   For the rest I must agree with Tims answer

User · Answer

Update  It finally made it into JavaScript  ECMAScript 2018      Named capturing groups could make it into JavaScript very soon  The proposal for it is at stage 3 already   A capture group can be given a name inside angular brackets using the    lt name gt      syntax  for any identifier name  The regular expression for a date then can be written as     lt year gt  d 4  -   lt month gt  d 2  -   lt day gt  d 2   u  Each name should be unique and follow the grammar for ECMAScript IdentifierName   Named groups can be accessed from properties of a groups property of the regular expression result  Numbered references to the groups are also created  just as for non-named groups  For example   let re       lt year gt  d 4  -   lt month gt  d 2  -   lt day gt  d 2   u  let result   re exec  2015-01-02       result groups year      2015      result groups month      01      result groups day      02       result 0       2015-01-02      result 1       2015      result 2       01      result 3       02

[javascript] Named capturing groups in JavaScript regex?

Examples related to javascript

Examples related to regex