Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use Regex to get the string between curly braces using JavaScript?
We can create a regular expression to find all substrings between curly braces and use methods like exec() or match() to extract them.
In this tutorial, we will learn to use regular expressions to get strings between curly braces in JavaScript. For example, from the string 'This is a {string} with {curly} braces', we need to extract "string" and "curly".
Using the exec() Method with Regular Expression
The exec() method finds matched substrings and returns results in array format. It returns null if no matches are found.
Syntax
var regex = /{([^}]+)}/g;
while (match = regex.exec(originalStr)) {
results.push(match[1]);
}
The regex /{([^}]+)}/g matches text between curly braces. The parentheses create a capture group for the content without braces.
Example
The regex.exec() method returns a 2D array where each match contains the full match and captured groups. We use match[1] to get the text without braces.
<html>
<body>
<h3>Using the <i>regular expression and exec() method</i> to get string between curly braces</h3>
<div id="demo"></div>
<script>
let output = document.getElementById("demo");
function getStringBetweenBraces() {
var originalStr = "Hello {Developers}! Let's develop {JavaScript} code!";
var regex = /{([^}]+)}/g;
var results = [];
let match;
while (match = regex.exec(originalStr)) {
results.push(match[1]);
}
output.innerHTML = "The original string is: " + originalStr + "<br>";
output.innerHTML += "The substrings between curly braces are: " + results.join(", ") + "<br>";
}
getStringBetweenBraces();
</script>
</body>
</html>
Using the match() Method with Regular Expression
The match() method returns all matching occurrences in array format. However, it returns strings with braces included.
Syntax
let results = originalStr.match(/{([^}]+)}/g);
Example
The match() method returns strings with curly braces. We need to remove braces using substring() or by modifying the regex to use capture groups with matchAll().
<html>
<body>
<h3>Using the <i>regular expression and match() method</i> to get string between curly braces</h3>
<div id="demo"></div>
<script>
let output = document.getElementById("demo");
function getStringBetweenBraces() {
var originalStr = "This is {sample} string! This is {original} string!";
let matches = originalStr.match(/{([^}]+)}/g);
let results = matches.map(match => match.slice(1, -1)); // Remove braces
output.innerHTML = "The original string is: " + originalStr + "<br>";
output.innerHTML += "The substrings between curly braces are: " + results.join(", ") + "<br>";
}
getStringBetweenBraces();
</script>
</body>
</html>
Using a For Loop Approach
We can extract substrings by iterating through the string and tracking the start and end positions of curly braces.
Syntax
for (let i = 0; i < str.length; i++) {
if (str[i] == "{") start = i;
if (str[i] == "}") {
end = i;
let bracesString = str.substring(start + 1, end);
}
}
Algorithm Steps
Step 1: Iterate through each character of the string using a for loop.
Step 2: When encountering '{', store the index as the start position.
Step 3: When encountering '}', store the index as the end position and extract the substring between start+1 and end using substring().
Example
This approach works for simple cases but doesn't handle nested braces properly.
<html>
<body>
<h3>Using the <i>for loop</i> to get string between curly braces</h3>
<div id="demo"></div>
<script>
let output = document.getElementById("demo");
function getStringBetweenBraces() {
var str = "Hello {Users}! Welcome to {Website}!";
var start = 0;
var end = 0;
let results = [];
for (var i = 0; i < str.length; i++) {
if (str[i] == "{") {
start = i;
}
if (str[i] == "}") {
end = i;
let bracesString = str.substring(start + 1, end);
results.push(bracesString);
}
}
output.innerHTML = "The original string is: " + str + "<br>";
output.innerHTML += "The substrings between curly braces are: " + results.join(", ") + "<br>";
}
getStringBetweenBraces();
</script>
</body>
</html>
Comparison
| Method | Complexity | Handles Nested Braces | Performance |
|---|---|---|---|
| exec() with regex | Low | No | Good |
| match() with regex | Low | No | Good |
| For loop | Medium | No | Average |
Conclusion
Regular expressions with exec() provide the most control for extracting text between curly braces. The match() method is simpler but requires additional processing to remove braces. Choose the regex approach for better performance and cleaner code.
6K+ Views
