JavaScript 脚本巧用正则表达式，变量替换轻松搞定！

2023-10-05 14:13:08

众所周知，JavaScript 是前端开发的利器，不仅能轻松操纵 DOM，还能处理复杂的数据。当我们需要对字符串进行替换时，正则表达式就派上用场了。然而，极限网关自带的过滤器 content_regex_replace 只能实现简单的字符替换，无法满足一些需要带参数变量替换的复杂需求。

别担心，JavaScript 脚本可以轻松搞定！让我们一起探索如何利用 JavaScript 脚本巧用正则表达式，实现变量替换。

首先，我们先来回顾一下正则表达式的基本语法。正则表达式使用一系列特殊字符来定义匹配模式，这些特殊字符包括点号(.)、星号()、问号(?)、方括号([])、连字符(-)等等。例如，正则表达式 "ab" 表示匹配字符串 "a" 后跟任意数量的 "b"。

现在，我们就可以开始构建 JavaScript 脚本了。首先，我们需要创建一个新的 JavaScript 文件，比如 "replace.js"，然后在其中输入以下代码：

function replaceVariables(inputString, variables) {
  // 将变量对象转换成正则表达式字符串
  const regexString = Object.keys(variables).map(key => {
    return `${key}(?![a-zA-Z0-9_])`;
  }).join('|');

  // 创建正则表达式对象
  const regex = new RegExp(regexString, 'g');

  // 使用正则表达式替换字符串中的变量
  return inputString.replace(regex, match => {
    return variables[match.slice(0, -1)];
  });
}

在这个脚本中，我们定义了一个名为 "replaceVariables" 的函数，它接受两个参数：要替换的字符串 "inputString" 和包含变量的 JavaScript 对象 "variables"。

函数首先将变量对象转换成正则表达式字符串。这里，我们使用 Object.keys() 方法获取变量对象的键（也就是变量名），然后使用 map() 方法将每个键转换成正则表达式字符串。

每个正则表达式字符串的格式为 "key(?![a-zA-Z0-9_])"，其中 "key" 是变量名，"(?![a-zA-Z0-9_])" 是一个否定前瞻断言，它确保变量名后面不能紧跟字母、数字或下划线。这有助于防止变量名被字符串中的其他部分匹配。

接下来，我们将这些正则表达式字符串用 join('|') 方法连接起来，形成一个复合正则表达式字符串。最后，我们使用 new RegExp(regexString, 'g') 创建一个正则表达式对象。

现在，我们就可以使用这个正则表达式对象来替换字符串中的变量了。我们使用 replace() 方法，将正则表达式对象作为第一个参数，一个回调函数作为第二个参数。

回调函数接受一个匹配对象作为参数，该匹配对象包含了匹配的字符串。我们使用 slice(0, -1) 方法从匹配的字符串中去除尾部的反斜杠，然后使用 variables[match.slice(0, -1)] 获取变量的值。

最后，我们将替换后的字符串返回。

现在，我们就可以使用这个 "replaceVariables" 函数来替换字符串中的变量了。例如，我们可以这样使用：

const inputString = "Hello, ${name}! Your age is ${age}.";
const variables = {
  name: 'John',
  age: 30
};

const replacedString = replaceVariables(inputString, variables);

console.log(replacedString);

运行这段代码，你将会看到输出：