JavaScript 根据匹配的RegEx动态替换数据

Regex（或称正则表达式）是用来匹配文本串中的模式。使用JavaScript，你可以使用regex根据匹配的模式来动态替换数据。

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

JavaScript提供了各种数据类型来存储各种类型的值。因为JavaScript引擎以动态的方式使用变量，所以在使用JavaScript时没有必要指定变量的类型。在这里，必须用var来指定数据类型，它可以存储任何类型的值，包括字符串、数字等等。

在JavaScript中使用replace()

JavaScript中的replace()方法是用来搜索一个字符串的指定值，或一个正则表达式，并返回一个新的字符串，其中指定的值被替换。原有的字符串在replace()方法中是没有变化的。

语法

以下是replace()的语法

string.replace(searchValue, newValue)

为了清楚地了解 “根据匹配的搜索结果动态改变数据”，让我们看看下面的例子。

示例

在下面的例子中，我们使用一个regex表达式并将其传递给一个函数。然后，函数得到替换键作为*输入，如果有的话，就替换它们，并以换行方式显示结果。

<!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>

当脚本被执行时，它将产生一个由原始模板和显示在网络浏览器上的替换模板组成的输出，这是由执行脚本时触发的事件引起的。

示例

考虑下面的例子，我们使用regex表达式来动态地替换脚本中使用的数据。

<!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>

在运行上述脚本时，网络浏览器会显示与regex表达式相比较的句子，并在网页上被运行该脚本时触发的事件所取代。

示例

执行下面的代码，观察如何使用regex表达式来动态地改变数值。

<!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>