Get Values Between Square Brackets in JavaScript RegExp

Extracting values between various square brackets can be done using JavaScript regular expressions. The regular expressions in JavaScript are useful for extracting values enclosed within different types of brackets, such as square brackets ([ ]), curly brackets ({ }), and parentheses "( )". In this article, we'll look at how to use JavaScript's RegExp to find and get content that is inside square brackets easily.

Understanding JavaScript RegExp

Regular expressions (RegExp) are patterns used to match and manipulate strings in JavaScript. JavaScript RegExp helps you find and get text that is inside specific brackets by using patterns.

The basic syntax for extracting values between square brackets using regular expression is:

/\[(.*?)\]/g

Regular Expression for Square Brackets

The following are some important terminologies and concepts you need to understand to extract values within square brackets in JavaScript:

• Character Escaping: Since square brackets ([]) have special meanings in RegExp, we need to use a double backslash to treat them as regular characters. So we write them as [ and ].
• Capture Groups: Parentheses () allow capturing matched substrings for later use.
• Global and Case-Insensitive Flags: Flags like "g" (for global) and "i" (for case insensitive) make sure we find all matches, no matter the case.

Example 1

The following is a simple example of extracting values between square brackets using regular expressions in JavaScript.

Use regular expression with indexes 0,1?.N to get the value without brackets.

var regularExpression = /(?<=\[).*?(?=\])/g;
var getTheValueWithIndex= "[John Smith][David Miller]".match(regularExpression);
console.log("The first value without bracket="+getTheValueWithIndex[0]);
console.log("The second value without bracket="+getTheValueWithIndex[1]);

Output

The first value without bracket=John Smith
The second value without bracket=David Miller

Code Explanation

Here is the code explanation for the above code:

• \[ and \]" are used to match actual square brackets.
• (.*?) is used to capture the content inside the brackets, and .*? makes sure it stops at the first closing bracket it finds.
• The "g" flag makes sure we find all matches.
• matchAll() gives us a list of matches, and we can turn that list into an array using .map(match => match[1]) to get just the values we want.

Example 2

In the above example, we have seen a simple regular expressions example. Meanwhile, in this example, we have used the matchAll() and map() methods to match all the values within square brackets and map them together in an array.

const str = "Welcome [Hello], [Hii], and [Bye Bye].";
const regex = /\[(.*?)\]/g;
// Regular expression to match values between square brackets

const results = [...str.matchAll(regex)].map(match => match[1]);
// Extract values

console.log(results);

Output

[ 'Hello', 'Hii', 'Bye Bye' ]

Code Explanation

Here is the code explanation for the above code:

• In the above code, the str is the string from which we want to extract values between square brackets.
• The regualr expression pattern (/\[(.*?)\]/g;) matches any text found between square brackets ([...]).
• The matchAll() returns an iterator of all matches found in the string, which is then spread into an array.
• The map() method maps all the matches into an array.
• In the last, console.log(results); prints the array of extracted values to the console.

Conclusion

In this article, we have implemented how to extract values between square brackets in JavaScript. We have used regular expressions to do this. Regular expressions are the simplest and best tool for text processing and pattern matching.