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

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:
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?