JavaScript RegExp return values between various square brackets? How to get value brackets?

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 backslash to treat them as regular characters. So we write them as \[ and \].
• Capture Groups: Parentheses () allow capturing matched substrings for later use.
• Non-greedy Matching: The .*? pattern matches as few characters as possible until the closing bracket.
• Global Flag: The "g" flag ensures we find all matches, not just the first one.

Using Lookbehind and Lookahead

The following example uses positive lookbehind (?<=\[) and positive lookahead (?=\]) to extract values without including the 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]);

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

Code Explanation

• (?<=\[) - Positive lookbehind that matches text preceded by an opening bracket
• .*? - Non-greedy match for any characters
• (?=\]) - Positive lookahead that matches text followed by a closing bracket
• g flag ensures all matches are found

Using Capture Groups with matchAll()

This approach uses capture groups to extract content and the matchAll() method for better handling:

const str = "Welcome [Hello], [Hii], and [Bye Bye].";
const regex = /\[(.*?)\]/g;

const results = [...str.matchAll(regex)].map(match => match[1]);
console.log(results);

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

Code Explanation

• \[ and \] - Escaped square brackets to match literal brackets
• (.*?) - Capture group that matches content inside brackets
• matchAll() - Returns an iterator of all matches with capture groups
• map(match => match[1]) - Extracts only the captured content (index 1)

Handling Nested or Complex Brackets

For more complex scenarios with nested brackets or mixed bracket types:

const complexStr = "Data: [user[admin]], [settings], [config[dev]]";
const nestedRegex = /\[([^\[\]]*(?:\[[^\[\]]*\][^\[\]]*)*)\]/g;

const nestedResults = [...complexStr.matchAll(nestedRegex)].map(match => match[1]);
console.log("Nested results:", nestedResults);

Nested results: [ 'user[admin]', 'settings', 'config[dev]' ]

Comparison of Methods

Conclusion

JavaScript regular expressions provide powerful tools for extracting values between square brackets. Use capture groups with matchAll() for the most reliable cross-browser solution, and consider lookbehind/lookahead for simpler cases in modern environments.