如何使用JavaScript的正则表达式来获取花括号之间的字符串？-js教程-PHP中文网

首页

web前端

js教程

如何使用JavaScript的正则表达式来获取花括号之间的字符串？

PHPz

Aug 23, 2023 am 08:41 AM

如何使用JavaScript的正则表达式来获取花括号之间的字符串？

我们可以创建一个正则表达式，以便它可以找到所有花括号之间的子字符串。之后，我们可以使用exec()或match()方法来提取匹配的子字符串。

在本教程中，我们将学习使用JavaScript的正则表达式来获取花括号之间的字符串。例如，如果我们有一个字符串像‘This is a {string} with {curly} braces, we need to extract all substrings that reside between the curly braces. ’，我们需要提取所有位于花括号之间的子字符串。

使用exec()方法与正则表达式来获取花括号之间的字符串

exec()方法通常与正则表达式一起使用，用于查找匹配的子字符串。它以数组格式返回所有匹配结果，如果找不到任何匹配的情况，则返回null值。

语法

Users can follow the syntax below to use the exec() method with the regular expression to get all substrings between the curly braces.

var regex = /{([^}]+)}/g;
while (match = regex.exec(originalStr)) {
   results.push(match[1]);
}

在上面的语法中，我们创建了一个正则表达式来查找大括号之间的子字符串。然后，我们遍历匹配数组并获取所有匹配的出现。

Example

的中文翻译为：

示例

‘originalStr’变量包含下面示例中带有花括号的字符串。regex.exec()方法返回所有匹配子字符串的二维数组。数组的每个元素都是一个包含两个字符串的数组。第一个元素是带有花括号的字符串，第二个元素是我们想要提取的不带花括号的字符串。

在输出中，用户可以观察到它显示了“Developers”和“JavaScript”子字符串，因为它们都在花括号之间。

<html>
<body>
   <h3 id="Using-the-i-regular-expression-and-exec-method-i-to-get-string-between-curly-braces-in-JavaScript">Using the <i> regular expression and exec() method </i> to get string between curly braces in JavaScript</h3>
   <div id = "demo"> </div>
   <script>
      let output = document.getElementById("demo");
      function getStringBetweenBraces() {
         var originalStr = "Hello {Developers}! Let's develop {JavaScript} code!";
         var found = [];
         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 + "<br>";
      }
      getStringBetweenBraces();
   </script>
</body>
</html>

使用match()方法与正则表达式来获取大括号之间的字符串

match()方法还以数组格式返回字符串中的所有匹配出现。

语法

用户可以按照以下语法使用match()方法和正则表达式来获取花括号之间的字符串

let results = originalStr.match(/{([^}]+)}/g);

在上面的语法中，originalStr是一个带有花括号的字符串，并且我们将正则表达式作为match()方法的参数传递。

Example

的中文翻译为：

示例

在下面的示例中，match()方法返回带有花括号的字符串数组。然而，它不返回删除花括号后的字符串。用户可以使用subStr()或substring()方法从返回的结果中删除花括号。

<html>
<body>
   <h3 id="Using-the-i-regular-expression-and-match-method-i-to-get-string-between-curly-braces-in-JavaScript">Using the <i> regular expression and match() method </i> to get string between curly braces in JavaScript</h3>
   <div id = "demo"> </div>
   <script>
      let output = document.getElementById("demo");
      function getStringBetweenBraces() {
         var originalStr = "This is {sample} string! This is {original} string!";
         let results = originalStr.match(/{([^}]+)}/g); 
         output.innerHTML = "The original string is " + originalStr + "<br>";
         output.innerHTML += "The substrings between curly braces are " + results + "<br>";
      }
      getStringBetweenBraces();
   </script>
</body>
</html>

使用for循环获取大括号之间的字符串

我们还可以通过使用for循环迭代字符串来提取花括号之间的所有子字符串。我们可以跟踪花括号的起始索引和结束索引。然后，我们可以使用substring()方法从原始字符串中提取子字符串。

语法

用户可以按照以下语法使用for循环来提取花括号之间的子字符串。

for ( ) {
   if (str[i] == "{")
   start = i;
   if (str[i] == "}") {
      end = i;
      let bracesString = str.substring(start + 1, end);
   }
}

在上述语法中，我们跟踪花括号的开始和结束索引，并使用substring()方法提取字符串。

步骤

第一步 - 使用for循环遍历字符串。

第二步 - 如果字符串中索引为'I'的字符等于'{'，则将索引的值存储在start变量中。

步骤 3 - 如果字符串中索引为'I'的字符等于'}'，将索引的值存储在end变量中。

第3.1步 − 使用substring()方法获取在‘end’索引之后的‘start + 1’索引之间的子字符串。

步骤 3.2 - 将结果子字符串推入数组中。

Example

的中文翻译为：

示例

在下面的示例中，我们按照上述步骤使用for循环提取了花括号之间的字符串。然而，这种方法不适用于提取嵌套花括号之间的字符串。

<html>
<body>
   <h3 id="Using-the-i-for-loop-i-to-get-string-between-curly-braces-in-JavaScript">Using the <i> for loop </i> to get string between curly braces in JavaScript</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 + "<br>";
      }
      getStringBetweenBraces();
   </script>
</body>
</html>

我们在本教程中学习了如何使用正则表达式提取花括号之间的字符串。在第一种方法中，我们使用了带有正则表达式的exec()方法；在第二种方法中，我们使用了带有正则表达式的match()方法。

在第三种方法中，我们使用了for循环而不是正则表达式。

以上是如何使用JavaScript的正则表达式来获取花括号之间的字符串？的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。

Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

JavaScript框架：为现代网络开发提供动力May 02, 2025 am 12:04 AM

JavaScript框架的强大之处在于简化开发、提升用户体验和应用性能。选择框架时应考虑：1.项目规模和复杂度，2.团队经验，3.生态系统和社区支持。

JavaScript，C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪，JavaScript、C 和浏览器之间到底有什么关系？它们之间看似毫无关联，但实际上，它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章，你将了解到JavaScript如何在浏览器中运行，C 在浏览器引擎中的作用，以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道，JavaScript是前端开发的核心语言，它直接在浏览器中运行，让网页变得生动有趣。你是否曾经想过，为什么JavaScr

See all articles