Getting key/value pairs from a string that resembles an Object (like JSON) by utilizing regular expressions

Question

Getting key/value pairs from a string that resembles an Object (like JSON) by utilizing regular expressions

Seeking help with grabbing key/value pairs from a string like {float: 'null', another: 'foo'}. The desired output groups are float null and another foo. My current regex pattern is

/\{(?<set>(?<key>\w*)\s*\:\s*(?<value>.*)?\s?)*\}/g

It correctly captures the keys, but struggles to extract individual values. I'm using named groups for clarity but need assistance in extracting each key/value pair when multiple pairs exist. Appreciate any guidance.

Currently experimenting with

/\{(?<set>(?<key>\w*)\s*\:\s*(?<value>.*)?\s?)*\}/g

but the output shows:

the group 'set': float: 'null', another: 'foo' (correct)

the group 'key': float (correct)

the group 'value': 'null', another: 'foo' (incorrect, seeking just null)

Interested in capturing all key/value pairs if possible

Edit for more clarity:

My specific challenge involves parsing Markdown for use with custom components in Svelte, focusing on gathering props from markdown syntax on an image. According to my research on adding attributes to an image, it should resemble:

![Alt Text]https://<fullurl>.jpg "This is hover text"){prop1: 'foo', prop2: 'bar', float: true}

The reason for using regex is to parse the markdown string, not adhering strictly to JSON format (" around the keys).

javascript regex regex-group

Answer 1

Answer №1

Give this lengthy JavaScript regex a try:

/(?<key>\w*)\s*:\s*(?<value>(?<quote>["'])(?:\\.|.)*?\k<quote>|(?<number>[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?)|(?<constant>true|false|null))/g

In action (view in full page, if not it's not all visible):

const regexKeyValue = /(?<key>\w*)\s*:\s*(?<value>(?<quote>["'])(?:\\.|.)*?\k<quote>|(?<number>[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?)|(?<constant>true|false|null))/g;

document.getElementById('search').addEventListener('click', function () {
  const input = document.getElementById('input').value;

  let match,
      i = 1,
      output = [];

  while ((match = regexKeyValue.exec(input)) !== null) {
    console.log(`Match n°${i} : ` + match[0]);
    console.log('match.groups =', match.groups);

    // If the value is starting with quotes, then unquoted it and
    // also replace all the escape sequences (ex: "\\n" should become "\n").
    let value = match.groups.value;
    // If it's double quotes, let's use JSON.parse() as it will handle everything.
    if (value.match(/^"/)) {
      value = JSON.parse(value);
    }
    // If it's simple quotes, we can't use JSON.parse() so we have to convert
    // it to a double-quoted string before.
    else if (value.match(/^'/)) {
      value = value
        // 1) Remove the simple quotes around.
        .replace(/^'|'$/g, '')
        // 2) Replace all \' by '.
        // We have to search for all backslashes to handle also an escaped backslash.
        .replace(/\\(.)/g, function (fullMatch, afterBackslash) {
          if (afterBackslash === "'") {
            return "'";
          } else {
            return fullMatch;
          }
        })
        // 3) Escape all double quotes (" becomes \").
        .replace(/"/g, '\\"');
      // 4) Now use JSON.parse();
      value = JSON.parse(`"${value}"`);
    }
    
    // If it's a number or a constant, then convert the string to this real JS value.
    if (typeof match.groups.number !== 'undefined' ||
        typeof match.groups.constant !== 'undefined') {
      value = JSON.parse(match.groups.value);
    }

    console.log('value =', value);
    
    output.push(
      `Match n°${i++} :\n` +
      `  Key   : ${match.groups.key}\n` +
      `  Value : ${value}\n`
    );
  }

  document.getElementById('output').innerText = output.join("\n");
  document.getElementById('label').classList.remove('hidden');
});

textarea {
  box-sizing: border-box;
  width: 100%;
}

pre {
  overflow-y: scroll;
}

.hidden {
  display: none;
}

<textarea id="input" rows="10">{
  float: 'null',
  another: "foo",
  age: 45,
  type: '"simple" \' quote',
  comment: "Hello,\nA backslash \\, a tab \t and a \"dummy\" word.\nOk?",
  important: true,
  weight: 69.7,
  negative: -2.5
}</textarea>

<button id="search">Search for key-value pairs</button>

<p id="label" class="hidden">Matches:</p>
<pre><code id="output"></code></pre>

The same regular expression, with comments, with the x flag that PCRE offers:

/
(?<key>\w*)        # The key.
\s*:\s*            # : with optional spaces around.
(?<value>          # The value.
  # A string value, single or double-quoted:
  (?<quote>["'])   # Capture the double or single quote.
    (?:\\.|.)*?    # Backslash followed by anything or any char, ungreedy.
  \k<quote>        # The double or single quote captured before.
|
  # Int and float numbers:
  (?<number>[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?)
|
  # true, false and null (or other constants):
  (?<constant>true | false | null)
)
/gx

Or better, on regex101, you'll have the colours and the explanation on the right column: https://regex101.com/r/bBPvUd/2

Answer 2

Give this lengthy JavaScript regex a try:

/(?<key>\w*)\s*:\s*(?<value>(?<quote>["'])(?:\\.|.)*?\k<quote>|(?<number>[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?)|(?<constant>true|false|null))/g

In action (view in full page, if not it's not all visible):

const regexKeyValue = /(?<key>\w*)\s*:\s*(?<value>(?<quote>["'])(?:\\.|.)*?\k<quote>|(?<number>[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?)|(?<constant>true|false|null))/g;

document.getElementById('search').addEventListener('click', function () {
  const input = document.getElementById('input').value;

  let match,
      i = 1,
      output = [];

  while ((match = regexKeyValue.exec(input)) !== null) {
    console.log(`Match n°${i} : ` + match[0]);
    console.log('match.groups =', match.groups);

    // If the value is starting with quotes, then unquoted it and
    // also replace all the escape sequences (ex: "\\n" should become "\n").
    let value = match.groups.value;
    // If it's double quotes, let's use JSON.parse() as it will handle everything.
    if (value.match(/^"/)) {
      value = JSON.parse(value);
    }
    // If it's simple quotes, we can't use JSON.parse() so we have to convert
    // it to a double-quoted string before.
    else if (value.match(/^'/)) {
      value = value
        // 1) Remove the simple quotes around.
        .replace(/^'|'$/g, '')
        // 2) Replace all \' by '.
        // We have to search for all backslashes to handle also an escaped backslash.
        .replace(/\\(.)/g, function (fullMatch, afterBackslash) {
          if (afterBackslash === "'") {
            return "'";
          } else {
            return fullMatch;
          }
        })
        // 3) Escape all double quotes (" becomes \").
        .replace(/"/g, '\\"');
      // 4) Now use JSON.parse();
      value = JSON.parse(`"${value}"`);
    }
    
    // If it's a number or a constant, then convert the string to this real JS value.
    if (typeof match.groups.number !== 'undefined' ||
        typeof match.groups.constant !== 'undefined') {
      value = JSON.parse(match.groups.value);
    }

    console.log('value =', value);
    
    output.push(
      `Match n°${i++} :\n` +
      `  Key   : ${match.groups.key}\n` +
      `  Value : ${value}\n`
    );
  }

  document.getElementById('output').innerText = output.join("\n");
  document.getElementById('label').classList.remove('hidden');
});

textarea {
  box-sizing: border-box;
  width: 100%;
}

pre {
  overflow-y: scroll;
}

.hidden {
  display: none;
}

<textarea id="input" rows="10">{
  float: 'null',
  another: "foo",
  age: 45,
  type: '"simple" \' quote',
  comment: "Hello,\nA backslash \\, a tab \t and a \"dummy\" word.\nOk?",
  important: true,
  weight: 69.7,
  negative: -2.5
}</textarea>

<button id="search">Search for key-value pairs</button>

<p id="label" class="hidden">Matches:</p>
<pre><code id="output"></code></pre>

The same regular expression, with comments, with the x flag that PCRE offers:

/
(?<key>\w*)        # The key.
\s*:\s*            # : with optional spaces around.
(?<value>          # The value.
  # A string value, single or double-quoted:
  (?<quote>["'])   # Capture the double or single quote.
    (?:\\.|.)*?    # Backslash followed by anything or any char, ungreedy.
  \k<quote>        # The double or single quote captured before.
|
  # Int and float numbers:
  (?<number>[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?)
|
  # true, false and null (or other constants):
  (?<constant>true | false | null)
)
/gx

Or better, on regex101, you'll have the colours and the explanation on the right column: https://regex101.com/r/bBPvUd/2

Answer 3

Answer №2

While it has been pointed out in the discourse, the use of eval() is often labeled as "dangerous" or at least not secure. The exact reasons elude me currently, but it has something to do with vulnerabilities like cross-site scripting. That being said, if employed within a controlled and "secure" environment for processing input that is under your complete jurisdiction, there might still be some leeway.

const text=`Starting off with some content and now onto the image: 
![Alt Text]https://<url>.jpg "This is hover info"){name: 'apple', type: 'fruit', juicy: true} 
and more words.

Another paragraph followed by another image
![Alt Text2]https://<imageURL>.jpg "Alternate hover text"){name: 'banana', type: 'fruit', tropical: true} bringing us to the conclusion.`;

function riskyParse(input){
 return input.match(/\{[^}]+\}/g).map(segment=>eval(`(${segment})`));
}

// Produces an array of all image property objects:
console.log(riskyParse(text));

In addition to its inherent risks, the above approach is not foolproof since including the character "}" in property values can lead to complications...

Answer 4

While it has been pointed out in the discourse, the use of eval() is often labeled as "dangerous" or at least not secure. The exact reasons elude me currently, but it has something to do with vulnerabilities like cross-site scripting. That being said, if employed within a controlled and "secure" environment for processing input that is under your complete jurisdiction, there might still be some leeway.

const text=`Starting off with some content and now onto the image: 
![Alt Text]https://<url>.jpg "This is hover info"){name: 'apple', type: 'fruit', juicy: true} 
and more words.

Another paragraph followed by another image
![Alt Text2]https://<imageURL>.jpg "Alternate hover text"){name: 'banana', type: 'fruit', tropical: true} bringing us to the conclusion.`;

function riskyParse(input){
 return input.match(/\{[^}]+\}/g).map(segment=>eval(`(${segment})`));
}

// Produces an array of all image property objects:
console.log(riskyParse(text));

In addition to its inherent risks, the above approach is not foolproof since including the character "}" in property values can lead to complications...

Getting key/value pairs from a string that resembles an Object (like JSON) by utilizing regular expressions

Answer №1

Answer №2

Similar questions

Customize your Shopify Messenger icon using JavaScript!

Adding custom script bundles in NextJS is a great way to enhance the functionality and

Creating a Pre-authentication service for AWS Cognito using VueJS

What's the optimal method for integrating bootstrap.css into a Nuxt project?

Learn how to dynamically apply a class to a table row in a dataTable based on the presence of an ID within the data,

Global registration of Vue components involves making them available application wide

An error has occurred in the Javascript/EJS code: TypeError - Unable to access the 'name' property of null

What are the best practices for presenting Motion JPEG binary data streams using Angular, Ionic, and JavaScript?

Can you explain the distinction between a def interface and a dto interface within Angular development?

Using the native functionality, submitting a razor form with JQuery AJAX in MVC6

Is it possible to implement pagination for loading JSON data in chunks in jsGrid?

Terminal displaying a running error for a NestJS CLI project

Observable not defined in facade pattern with RxJS

What is the best way to incorporate an array of elements into Firebase?

What are the differences between the detail_page and the list_page?

Label button for personalized file selection field

napi and SWIG: ThreadSafeFunction only runs in a thread after the thread has finished its execution

The Ocelot API Gateway is a powerful tool for managing

Listen for incoming data from the client in the form of an ArrayBuffer

Ways to set a single element as selected from a group of elements retrieved from the backend