Using JavaScript regex to match repeating subgroups

Question

Using JavaScript regex to match repeating subgroups

Can a regular expression capture all repeating and matching subgroups in one call?

Consider a string like this:

{{token id=foo1 class=foo2 attr1=foo3}}

Where the number of attributes (e.g. id, class, attr1) are variable and can be any key=value pair.

Currently, the regex and output are as follows here

var pattern = /\{{([\w\.]+)(?:\s+(\w+)=(?:("(?:[^"]*)")|([\w\.]+)))*\}\}/;
var str = '{{token arg=1 id=2 class=3}}';

var matches = str.match(pattern);
// -> ["{{token arg=1 id=2 class=3}}", "token", "class", undefined, "3"]

It appears to only match the last group; Is there a way to retrieve all the other "attributes" (arg and id)?

Please note: this example demonstrates matching in a single string, but the pattern may appear in a much larger string with multiple matches. Therefore, ^ and $ cannot be used.

javascript regex

Answer 1

Answer №1

It is not feasible to achieve this using a single regular expression. The JavaScript Regex function will only provide you with the last matched group, which is the main issue you are facing. I encountered a similar issue some time ago: Regex only capturing last instance of capture group in match. While it is possible to accomplish this in .Net, it may not be the ideal solution for your needs.

I am confident that with some effort, you can devise a regular expression to extract the arguments from the second group.

\{\{(\w+)\s+(.*?)\}\}

Below is a snippet of JavaScript code demonstrating how this can be achieved:

var input = $('#input').text();
var regex = /\{\{(\w+)\s*(.*?)\}\}/g;
var match;
var attribs;
var kvp;
var output = '';

while ((match = regex.exec(input)) != null) {
    output += match[1] += ': <br/>';

    if (match.length > 2) {
        attribs = match[2].split(/\s+/g);
        for (var i = 0; i < attribs.length; i++) {
            kvp = attribs[i].split(/\s*=\s*/);
            output += ' - ' + kvp[0] + ' = ' + kvp[1] + '<br/>';       
        }
    }
}
$('#output').html(output);

jsFiddle

An unconventional approach would be to utilize a regex and replace method to convert your code into JSON format, which can then be decoded using JSON.parse. The following snippet provides a starting point for this concept.

/[\s\S]*?(?:\{\{(\w+)\s+(.*?)\}\}|$)/g.replace(input, doReplace);

function doReplace ($1, $2, $3) {
  if ($2) {
    return "'" + $2 + "': {" + 
      $3.replace(/\s+/g, ',')
        .replace(/=/g, ':')
        .replace(/(\w+)(?=:)/g, "'$1'") + '};\n';       
    }
   return '';
 }

REY

Answer 2

It is not feasible to achieve this using a single regular expression. The JavaScript Regex function will only provide you with the last matched group, which is the main issue you are facing. I encountered a similar issue some time ago: Regex only capturing last instance of capture group in match. While it is possible to accomplish this in .Net, it may not be the ideal solution for your needs.

I am confident that with some effort, you can devise a regular expression to extract the arguments from the second group.

\{\{(\w+)\s+(.*?)\}\}

Below is a snippet of JavaScript code demonstrating how this can be achieved:

var input = $('#input').text();
var regex = /\{\{(\w+)\s*(.*?)\}\}/g;
var match;
var attribs;
var kvp;
var output = '';

while ((match = regex.exec(input)) != null) {
    output += match[1] += ': <br/>';

    if (match.length > 2) {
        attribs = match[2].split(/\s+/g);
        for (var i = 0; i < attribs.length; i++) {
            kvp = attribs[i].split(/\s*=\s*/);
            output += ' - ' + kvp[0] + ' = ' + kvp[1] + '<br/>';       
        }
    }
}
$('#output').html(output);

jsFiddle

An unconventional approach would be to utilize a regex and replace method to convert your code into JSON format, which can then be decoded using JSON.parse. The following snippet provides a starting point for this concept.

/[\s\S]*?(?:\{\{(\w+)\s+(.*?)\}\}|$)/g.replace(input, doReplace);

function doReplace ($1, $2, $3) {
  if ($2) {
    return "'" + $2 + "': {" + 
      $3.replace(/\s+/g, ',')
        .replace(/=/g, ':')
        .replace(/(\w+)(?=:)/g, "'$1'") + '};\n';       
    }
   return '';
 }

REY

Answer 3

Answer №2

If you want to achieve this functionality, you can follow these steps:

let str = "{{token id=foo1 class=foo2 attr1=foo3 hi=we}} hiwe=wef";
let matches = str.match(/(\w+(?==\w+)|(?!==\w+)\w+)(?!\{\{)(?!.*token)(?=.*}})/g);
matches.splice(0,1);
for (let i = 0; i < matches.length; i++) {
    console.log(matches[i]);
}

The regular expression used here is

/(\w+(?==\w+)|(?!==\w+)\w+)(?!\{\{)(?!.*token)(?=.*}})/g

(Make sure to use global modifier g to match all attributes)

After running the code, the array will be as follows:

["id","foo1","class","foo2","attr1","foo3","hi","we"]

For a demonstration, you can check out this live demo: http://jsfiddle.net/HYW72/1/

Answer 4

If you want to achieve this functionality, you can follow these steps:

let str = "{{token id=foo1 class=foo2 attr1=foo3 hi=we}} hiwe=wef";
let matches = str.match(/(\w+(?==\w+)|(?!==\w+)\w+)(?!\{\{)(?!.*token)(?=.*}})/g);
matches.splice(0,1);
for (let i = 0; i < matches.length; i++) {
    console.log(matches[i]);
}

The regular expression used here is

/(\w+(?==\w+)|(?!==\w+)\w+)(?!\{\{)(?!.*token)(?=.*}})/g

(Make sure to use global modifier g to match all attributes)

After running the code, the array will be as follows:

["id","foo1","class","foo2","attr1","foo3","hi","we"]

For a demonstration, you can check out this live demo: http://jsfiddle.net/HYW72/1/

Answer 5

Answer №3

const strValue = "{{token id=foo1 class=foo2 attr1=foo3}}"
if (matches = strValue.match(///^
        \{\{
        ([a-z][a-z0-9]*)   # identifier
        (
            (?:
                \s+
                ([a-z][a-z0-9]*)  # identifier
                =
                (\S*)             # value
                )*
            )
        \}\}
        $///)
    [_, token, attrString] = matches

    const attributeMap = {}
    for (match of attrString.matchAll(///
            ([a-z][a-z0-9]*)  # identifier
            =
            (\S*)             # value
            ///g)
        [_, key, value] = match
        attributeMap[key] = value

    console.log "token = '#{token}'"
    console.log attributeMap
else
    console.log "NO MATCH"

This code is written in CoffeeScript, designed for better readability. The use of matchAll() function allows for parsing the attribute-value pairs efficiently. The regex pattern /// runs until the next ///, ignoring whitespace and allowing comments. There are some assumptions made about input data, like keys being identifiers with only lowercase letters, values being any non-whitespace characters, and unique attribute names, but they can be easily adjusted.

Just so you know, the output of the above code is:

token = 'token'
{ id: 'foo1', class: 'foo2', attr1: 'foo3' }

Answer 6

const strValue = "{{token id=foo1 class=foo2 attr1=foo3}}"
if (matches = strValue.match(///^
        \{\{
        ([a-z][a-z0-9]*)   # identifier
        (
            (?:
                \s+
                ([a-z][a-z0-9]*)  # identifier
                =
                (\S*)             # value
                )*
            )
        \}\}
        $///)
    [_, token, attrString] = matches

    const attributeMap = {}
    for (match of attrString.matchAll(///
            ([a-z][a-z0-9]*)  # identifier
            =
            (\S*)             # value
            ///g)
        [_, key, value] = match
        attributeMap[key] = value

    console.log "token = '#{token}'"
    console.log attributeMap
else
    console.log "NO MATCH"

This code is written in CoffeeScript, designed for better readability. The use of matchAll() function allows for parsing the attribute-value pairs efficiently. The regex pattern /// runs until the next ///, ignoring whitespace and allowing comments. There are some assumptions made about input data, like keys being identifiers with only lowercase letters, values being any non-whitespace characters, and unique attribute names, but they can be easily adjusted.

Just so you know, the output of the above code is:

token = 'token'
{ id: 'foo1', class: 'foo2', attr1: 'foo3' }

Using JavaScript regex to match repeating subgroups

Answer №1

jsFiddle

REY

Answer №2

Answer №3

Similar questions

Attempting to transmit information to database using AJAX in the context of CodeIgniter

Prevent animations on child elements with Vue.js

Discovering the specific marker that was clicked from a group of Google map markers

Activate ajax search in select2 by hand

how can a select dropdown be dynamically displayed based on the previous selection?

Can someone provide guidance on effectively implementing this JavaScript (TypeScript) Tree Recursion function?

Listening for JS events on a CSS class called "int-only" which only accepts

Comparison of WebAPI Response Codes: Understanding the Difference Between 401 and

Top method for establishing a mysql connection in Express version 4

Angular version 4 is used to retrieve deeply nested JSON data

What is the best way to deduct pixels from numbers using JavaScript?

The backend is not receiving the variable through RESTful communication

Attempting to control an array of objects

Arrange DIV elements sequentially with HTML, JQuery, and CSS

Issues with Ajax calls not functioning properly within CakePHP

Is it possible to use @ViewChild to target an element based on its class name?

The Hull.js Node.js npm module now offers convex hull computations instead of concave hull calculations

Use $.ajax to display the menu by capturing an array of elements {0}

Receive JSON data with camel-case in a Web API 2.0 using a model in pascal-case style

What is the process for requesting a specific condition using jscript and jquery?