如何使用正则表达式匹配用户输入与innerText的部分内容？

算力阿峰

2026-10-2

问题根因

原代码构造的正则需要完全匹配完整的预设字符串才会返回true，没有做前缀匹配适配
使用了g全局修饰符，RegExp.test()调用时会持续记录lastIndex匹配位置，导致后续匹配结果出现异常
循环拼接预设字符串时产生了多余的前导空格，匹配规则不符合预期

调整方案

核心修改逻辑

优化预设字符串拼接逻辑，用join方法生成无多余空格的完整序列
新增正则元字符转义函数，避免预设词包含. * +这类正则特殊字符时匹配出错
重新构造正则规则：用^锚定从用户输入的开头匹配，去掉g修饰符，只要输入内容是预设完整序列的前缀就匹配成功
如果只需要匹配到第一个完整词后就始终返回true，不需要后续内容严格匹配，可以调整正则规则为仅匹配第一个词的前缀

修改后完整代码

main.js

const userInput = document.getElementById('user-text');
const placeholderText = document.getElementById('placeholder-text');

const placeholder = ['Fly', 'Cat'];
// 拼接生成无多余空格的预设完整序列
const fullPattern = placeholder.join(' ');
let matchRegex;

addTestText(placeholder);

userInput.addEventListener('input', e => addWords(e));

// 转义正则特殊字符，避免预设词包含元字符时匹配异常
function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function addTestText(s) {
  placeholderText.innerText = fullPattern;
  // 方式1：严格匹配预设序列的所有前缀，输入内容必须和「Fly Cat」的前N位完全一致才返回true
  matchRegex = new RegExp(`^${escapeRegExp(fullPattern)}`);

  // 方式2：只要输入开头包含第一个完整词「Fly」就返回true，不需要后续内容严格匹配
  // const firstWord = escapeRegExp(placeholder[0]);
  // matchRegex = new RegExp(`^${firstWord}`);
}

function addWords(e) {
  const text = e.target.innerText.trim();
  console.log(matchRegex.test(text));
}