How to use Regex to get the string between curly braces using JavaScript ?

Last Updated : 17 Sep, 2019

The problem is to get the string between the curly braces. Here we are going to see different Regular Expressions to get the string.

Approach 1:

Selecting the string between the outer curly braces.
The RegExp selects the all curly braces, removes them and then get the content.

Example: This example illustrate the above approach .

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to use Regex to get the string between
        curly braces using JavaScript ?
    </title>
</head>
  
<body style="text-align:center;">
      
    <h1 id="h1" style="color:green;"> 
        GeeksforGeeks 
    </h1>
      
    <p id="GFG_UP" style=
        "font-size: 15px; font-weight: bold;">
    </p>
      
    <button onclick="gfg_Run()">
        Click here
    </button>
      
    <p id="GFG_DOWN" style=
        "font-size: 23px; font-weight: bold; color: green; ">
    </p>
      
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        var st = '{This is GeeksforGeeks}';
          
        el_up.innerHTML =
            "Click on the button to get the content between"
            + " the curly brackets.<br> Str = '" + st + "'";
  
        function gfg_Run() {
            st = st.replace(/\{|\}/gi, '');
            el_down.innerHTML = st;
        }
    </script>
</body>
  
</html>

Output:

Before clicking on the button:
After clicking on the button:

Approach 2:

In this approach we are selecting the string between the curly braces.
The RegExp selects the string from right side. It looks for the opening curly brace from the rightmost curly brace and print that as string.

Example: This example illustrate the above approach .

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to use Regex to get the string between
        curly braces using JavaScript ?
    </title>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1>
      
    <p id="GFG_UP" style=
        "font-size: 15px; font-weight: bold;">
    </p>
      
    <button onclick="gfg_Run()">
        Click here
    </button>
      
    <p id="GFG_DOWN" style=
        "font-size: 23px; font-weight: bold; color: green; ">
    </p>
      
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        var st = '{This is {GeeksforGeeks}}';
          
        el_up.innerHTML = "Click on the button to get the "
                + "content between the curly brackets.<br>"
                + "Str = '" + st + "'";
  
        function gfg_Run() {
            st = st.replace(/.*\{|\}/gi, '');
            el_down.innerHTML = st;
        }
    </script>
</body>
  
</html>

Output:

Before clicking on the button:
After clicking on the button:

My Personal Notes

Related Articles