根据匹配的正则表达式动态替换数据 - JavaScript?

javascriptweb developmentfront end technology

正则表达式(或正则表达式)用于匹配文本字符串中的模式。使用 JavaScript,您可以使用正则表达式根据匹配的模式动态替换数据。

本文将解释如何结合使用正则表达式和 JavaScript 在代码中进行动态替换。我们将介绍正则表达式语法、正则表达式对象以及在 JavaScript 中使用它们的方法的基础知识。

JavaScript 提供各种数据类型来存储各种类型的值。由于 JavaScript 引擎以动态方式使用变量,因此在使用 JavaScript 时无需指定变量的类型。在这里,必须使用 var 指定数据类型。它可以存储任何类型的值,包括字符串、数字等。

在 JavaScript 中使用 replace()

JavaScript 中的 replace() 方法用于在字符串中搜索指定值或正则表达式,并返回替换指定值的新字符串。原始字符串不会被 replace() 方法改变。

语法

以下是 replace() 的语法>

string.replace(searchValue, newValue)

为了清楚地理解"根据匹配的正则表达式动态更改数据",让我们看看以下示例。

示例

在下面的示例中,我们使用 正则表达式并将其传递给函数。然后函数获取替换键作为输入,如果可用则替换它们,并以换行符显示结果。

<!DOCTYPE html>
<html>
<body>
   <script>
      const Original= "#T1# to the #T2# the #T3# E-way learning";
      const replacements = {
         T1: "Welcome",
         T2: "Tutorialspoint",
         T3: "Best"
      };
      const afterchange = Original.replace(/#([^#]+)#/g, (match, key) => {
         return replacements[key] !== undefined ? "<br />" + replacements[key]: "";
      });
      document.write("Original:", Original+"<br>");
      document.write("afterchange:", afterchange);
   </script>
</body>
</html>

当脚本执行时,它将生成一个输出,该输出由原始模板以及在 Web 浏览器上显示的替换模板组成,这是由执行脚本时触发的事件引起的。

示例

考虑以下示例,其中我们使用 正则表达式 动态替换脚本中使用的数据。

<!DOCTYPE html>
<html>
<body>
   <p id="tutorial"></p>
   <script>
      var val = {
         "address_1": "Yes",
         "address_2": "Hyderabad",
         "address_10": "Permanent",
      }
      var sentence = `Can I Know The Address: #ADDRESS1# You Are From:#ADDRESS2# Is It Current Or Permanent: #ADDRESS10#`
      sentence = sentence.replace(/#ADDRESS(\d+)#/g, function(addr, num) {
         var str = val["address_"+num]; return str?str+"<br/>":""
      })
      document.getElementById("tutorial").innerHTML=(sentence);
   </script>
</body>
</html>

运行上述脚本时,网络浏览器会显示与正则表达式进行比较的句子,并在网页上由运行此脚本时触发的事件替换。

示例

执行以下代码以观察如何使用正则表达式动态更改值。

<!DOCTYPE html>
<html>
<body>
   <p id="tutorial"></p>
   <script>
      var temp = `My name is {{fullName}} I live in {{countryName}}`;
      var details = {
         "fullName": "David Miller",
         "countryName": "AUS"
      }
      replaceName = temp.replace(/\{\{(.+?)\}\}/g, (matching, value) => details[value.trim()]);
      document.getElementById("tutorial").innerHTML=(replaceName);
   </script>
</body>
</html>

当脚本执行时,会触发事件,使给定的句子与正则表达式进行比较并进行替换,然后显示替换后的句子。


相关文章