如何在JavaScript中用正则通配符比较含变量占位符的字符串

要验证带%%variable%%这类占位符的字符串和替换后的目标字符串是否匹配，可以通过将占位符字符串转换为正则表达式的方式实现，核心思路是把占位符替换成能匹配任意内容的正则片段，同时转义原字符串中的正则特殊字符避免匹配异常。

实现步骤与代码 #

1. 转义正则特殊字符工具函数

先写一个工具函数处理原字符串中的正则特殊字符（如.、+、?、\等），防止这些字符干扰正则匹配逻辑：

function escapeRegexChars(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

2. 生成匹配正则

将占位符字符串转换为正则表达式，把所有%%xxx%%格式的占位符替换为非贪婪匹配的任意内容片段：

function createPlaceholderRegex(placeholderStr) {
  const escapedStr = escapeRegexChars(placeholderStr);
  // 替换任意%%xxx%%占位符为匹配任意内容的非贪婪分组
  const regexPattern = `^${escapedStr.replace(/%%.*?%%/g, '(.*?)')}$`;
  return new RegExp(regexPattern);
}

3. 匹配验证函数

用生成的正则测试目标字符串是否符合占位符模板：

function isPlaceholderMatch(placeholderStr, targetStr) {
  const regex = createPlaceholderRegex(placeholderStr);
  return regex.test(targetStr);
}

示例测试 #

// 基础单占位符场景
const template = "The following %%variable%% has been signed";
const validTarget = "The following group of documents has been signed";
const invalidTarget = "The following group has been signed incorrectly";

console.log(isPlaceholderMatch(template, validTarget)); // true
console.log(isPlaceholderMatch(template, invalidTarget)); // false

// 多占位符场景
const multiTemplate = "Hello %%name%%, your %%item%% will arrive on %%date%%";
const multiValidTarget = "Hello Bob, your wireless headphone will arrive on 2024-05-20";
console.log(isPlaceholderMatch(multiTemplate, multiValidTarget)); // true

// 占位符在开头/结尾的场景
const startTemplate = "%%greeting%%, welcome!";
const startValidTarget = "Hi there, welcome!";
console.log(isPlaceholderMatch(startTemplate, startValidTarget)); // true

const endTemplate = "Your order is: %%orderId%%";
const endValidTarget = "Your order is: #123456";
console.log(isPlaceholderMatch(endTemplate, endValidTarget)); // true

额外功能：提取替换内容 #

如果需要从目标字符串中提取占位符对应的替换内容，可以用exec方法获取分组结果：

const matchResult = createPlaceholderRegex(template).exec(validTarget);
if (matchResult) {
  console.log("提取的替换内容：", matchResult[1]); // 输出 "group of documents"
}

// 多占位符时会返回多个分组结果
const multiMatch = createPlaceholderRegex(multiTemplate).exec(multiValidTarget);
if (multiMatch) {
  console.log("姓名：", multiMatch[1]); // Bob
  console.log("商品：", multiMatch[2]); // wireless headphone
  console.log("日期：", multiMatch[3]); // 2024-05-20
}

注意事项 #

• 非贪婪匹配：使用(.*?)而非(.*)，避免出现匹配过度（比如占位符后还有固定文本时，非贪婪会准确停在固定文本前）。
• 空内容处理：如果允许占位符被替换为空字符串，可将(.*?)改为(.*)。
• 特殊字符兼容：转义函数确保原字符串中的正则特殊字符（如路径中的\、点号.）能被正确匹配。

内容的提问来源于stack exchange，提问作者jprealini