Searching for a regular expression pattern that can identify a match when a colon is present within both sets of double curly brackets

Question

Searching for a regular expression pattern that can identify a match when a colon is present within both sets of double curly brackets

I want to optimize the method below by using regex instead of indexOf:

hasMatch(value: any): boolean {
    if (isDefined(value)) {
      const valueStr = JSON.stringify(value);
      return valueStr.indexOf('{{') > -1 && valueStr.indexOf(':') > -1;
    } else {
      return false;
    }
  }

The current implementation checks for double brackets "{{" and a colon in the string, which sometimes flags matches on colons outside of the replacement strings.

However, I only want to identify a match if a colon exists between two double brackets indicating key/value pairs like: {{key:value}}

Here is my attempt at using regex based on some examples I found (I am quite new to regex):

const matches = valueStr.match(/\{{({^\}{}*)}}/g).map(x => `[${x.replace(/[^:]/g, '')}]`)

But I am currently facing an error:

main.js:66071 ERROR TypeError: Cannot read properties of null (reading 'map')

javascript angular regex typescript

Answer 1

Answer №1

To extract key-value pairs enclosed in double curly braces with a colon delimiter, you can utilize a regular expression that searches for a colon between {{ and }}, allowing for any non-} characters in between:

const data = "{{name: John}}"
console.log(data.match(/\{\{[^}]*:[^}]*}}/) !== null)

Answer 2

To extract key-value pairs enclosed in double curly braces with a colon delimiter, you can utilize a regular expression that searches for a colon between {{ and }}, allowing for any non-} characters in between:

const data = "{{name: John}}"
console.log(data.match(/\{\{[^}]*:[^}]*}}/) !== null)

Answer 3

Answer №2

When considering the permitted characters for the key and value, it is important to note that both the key and value cannot be empty strings:

{{\s*\w+\s*:\s*\w+\s*}}

Check out the Regex demo here

Alternatively, a more stringent version can be used which does not match whitespace characters:

{{\w+:\w+}}

View the enhanced Regex demo here

To effectively match a key and a value, ensuring that neither the key nor the value includes any of the following: {, }, or :

{{[^{}:]*[^\s{}:][^{}:]*:[^{}:]*[^\s{}:][^{}:]}}

The pattern above matches the following components:

{{: Literally matching these characters
[^{}:]*: Matching optional characters other than {, }, or :
[^\s{}:]: Matching a non-whitespace character other than {, }, or :
[^{}:]*: Matching optional characters other than {, }, or :
:: Matching a colon
[^{}:]*[^\s{}:][^{}:]*: Highlighting the same pattern as before the colon
}}: Literally matching these characters

See the detailed Regex demo here

const regex = /{{[^{}:]*[^\s{}:][^{}:]*:[^{}:]*[^\s{}:][^{}:]*}}/;
[
  "{{key:value}}",
  "{{ key : value }}",
  "{{ke#$%$%y:val#!$#$^$%^$%^^%$*&%ue }}",
  "{{:}}",
  "{{key:}}",
  "{{key: }}",
  "":value}}",
  "{{key:value:test}}"
].forEach(s =>
  console.log(`${s} --> ${regex.test(s)}`)
)

Answer 4

When considering the permitted characters for the key and value, it is important to note that both the key and value cannot be empty strings:

{{\s*\w+\s*:\s*\w+\s*}}

Check out the Regex demo here

Alternatively, a more stringent version can be used which does not match whitespace characters:

{{\w+:\w+}}

View the enhanced Regex demo here

To effectively match a key and a value, ensuring that neither the key nor the value includes any of the following: {, }, or :

{{[^{}:]*[^\s{}:][^{}:]*:[^{}:]*[^\s{}:][^{}:]}}

The pattern above matches the following components:

{{: Literally matching these characters
[^{}:]*: Matching optional characters other than {, }, or :
[^\s{}:]: Matching a non-whitespace character other than {, }, or :
[^{}:]*: Matching optional characters other than {, }, or :
:: Matching a colon
[^{}:]*[^\s{}:][^{}:]*: Highlighting the same pattern as before the colon
}}: Literally matching these characters

See the detailed Regex demo here

const regex = /{{[^{}:]*[^\s{}:][^{}:]*:[^{}:]*[^\s{}:][^{}:]*}}/;
[
  "{{key:value}}",
  "{{ key : value }}",
  "{{ke#$%$%y:val#!$#$^$%^$%^^%$*&%ue }}",
  "{{:}}",
  "{{key:}}",
  "{{key: }}",
  "":value}}",
  "{{key:value:test}}"
].forEach(s =>
  console.log(`${s} --> ${regex.test(s)}`)
)

Answer 5

Answer №3

If you're looking to achieve this task (my console didn't pick up on the syntax of your function), you can utilize the function below:

const findMatch = function (text) {
    return text.match(/\{\{([^:]*):([^:}]*)\}\}/) !== null;
}

I've included a breakdown of the regular expression since you mentioned that you're new to it.

^      // indicates the start of the input
\{\{   // looks for two consecutive curly braces 
[^:]*  // matches zero or more characters that are not colons
:      // signifies a colon
[^:}]* // matches zero or more characters that are not colons or closing curly braces
\}\}   // finds two consecutive closing curly braces
$      // marks the end of the input

findMatch("{{key:value}}")  // true
findMatch("{{:}}")          // true
findMatch("{{key:va:lue}}") // false (extra colon)
findMatch("{{key value}}")  // false (no colon separator)
findMatch("{{key,value}}")  // false (no colon separator)
findMatch("{{key:value}")   // false (only one leading curly brace)
findMatch("{key:value}}")   // false (only one trailing curly brace)
findMatch("{{}}")           // false (no colon separator)

Additional Information:

This regex assumes that the value does not include }.
If your keys and values consist only of characters, you can use \w* instead of [^:]* and [^:}]*.
If keys/values may contain white space, utilize [^:\s]* and [^:\s}]*.
If keys and values cannot be empty, replace * with +.
In JSON format, the key and value would be enclosed in quotation marks. This function will still correctly identify them in that scenario.

Answer 6

If you're looking to achieve this task (my console didn't pick up on the syntax of your function), you can utilize the function below:

const findMatch = function (text) {
    return text.match(/\{\{([^:]*):([^:}]*)\}\}/) !== null;
}

I've included a breakdown of the regular expression since you mentioned that you're new to it.

^      // indicates the start of the input
\{\{   // looks for two consecutive curly braces 
[^:]*  // matches zero or more characters that are not colons
:      // signifies a colon
[^:}]* // matches zero or more characters that are not colons or closing curly braces
\}\}   // finds two consecutive closing curly braces
$      // marks the end of the input

findMatch("{{key:value}}")  // true
findMatch("{{:}}")          // true
findMatch("{{key:va:lue}}") // false (extra colon)
findMatch("{{key value}}")  // false (no colon separator)
findMatch("{{key,value}}")  // false (no colon separator)
findMatch("{{key:value}")   // false (only one leading curly brace)
findMatch("{key:value}}")   // false (only one trailing curly brace)
findMatch("{{}}")           // false (no colon separator)

Additional Information:

This regex assumes that the value does not include }.
If your keys and values consist only of characters, you can use \w* instead of [^:]* and [^:}]*.
If keys/values may contain white space, utilize [^:\s]* and [^:\s}]*.
If keys and values cannot be empty, replace * with +.
In JSON format, the key and value would be enclosed in quotation marks. This function will still correctly identify them in that scenario.

Answer 7

Answer №4

Utilize the {{([^:]+):([^}]+)}} regular expression to extract key-value pairs, separating the key and value into three distinct groups.

const result = "{{key: value}}".match(/\{\{([^:]+):([^}]+)\}\}/);
console.log(result);

Answer 8

Utilize the {{([^:]+):([^}]+)}} regular expression to extract key-value pairs, separating the key and value into three distinct groups.

const result = "{{key: value}}".match(/\{\{([^:]+):([^}]+)\}\}/);
console.log(result);

Searching for a regular expression pattern that can identify a match when a colon is present within both sets of double curly brackets

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Save instantly while modifying an element

Using ES6 Promises with jQuery Ajax

css based on the current time in the United States

Tips for adjusting the height of a table in Semantic UI

What is the method for inserting a loop into a print template?

Send the value of a JavaScript variable to a PHP file upon calling a JavaScript function

Is there a way to translate IBM floating point data into JavaScript numbers?

Determining the Presence of an Entry in a Database Using Sequelize

Error in Angular 12: The module "@firebase/firestore" does not have an exported member named "type"

A method for separating arrays within a string based solely on the commas between each one

Guide to transforming a Javascript array into a JSON string

"Angular fails to retrieve any data from JSON API, returning a blank response

Encountered a ZoneAwareError while trying to import the InfiniteScrollModule

I am attempting to retrieve JSON data from bitbns.com, however I am encountering an issue

Fetching data from a list separated by commas using Firebase database

Field for user input featuring a button to remove the entry

Using jQuery to retrieve values from clicked buttons

Blending a series of filter lists together

Generating JSON files using PHP

Creating a sleek animated analog clock using CSS and jQuery