React中地址输入框含空格违禁词的验证方案求助

问题场景 #

我在React项目中需要限制用户在地址输入框输入违禁词，输入时抛出错误。目前实现的方案是通过常量中的字符串做验证，若输入包含违禁词就返回true来更新错误状态，但无法处理带空格的违禁词（比如PO BOX、POST BOX这类）——当前代码用split(' ')拆分用户输入会把带空格的违禁词拆成单个单词，导致校验失效。

注：不能修改客户端提供的违禁词字符串，只能处理用户输入，需求里有近100个类似带空格的违禁词。

当前实现代码 #

const constants = {
     ADDRESS_PROHIBITED_WORDS:'POBOX|POSTBOX|POSTBUS|P.O.B.O.X|PO BOX|POST BOX'
 }
 //假设用户输入如下文本
 const userInput = 'pobox 27 gujarat inida'
 
 const checkForProhibitedWords = userInput => {
    const addProhibitedWords = constants.ADDRESS_PROHIBITED_WORDS.split('|')
    const prohibitedWordsCheck = userInput.split(' ').some(eachWord => !addProhibitedWords.every(prohibWord => eachWord.toLowerCase() !== prohibWord.toLowerCase()))
    console.log('---->> checking',prohibitedWordsCheck );
    if (prohibitedWordsCheck) {
      console.log('Error triggered' );
    }else{
      console.log('Error removed' );
    }
    return prohibitedWordsCheck
  }
  
  checkForProhibitedWords(userInput);

解决方案 #

核心思路是直接用正则匹配整个用户输入，无需拆分单词，同时处理违禁词中的特殊字符（比如.），并忽略大小写：

• 先把常量中的违禁词按|拆分，对每个违禁词做正则转义（避免.这类特殊字符被当成正则元字符）
• 把转义后的违禁词拼接成一个大的正则表达式，开启i（忽略大小写）模式
• 直接检查用户输入是否匹配该正则即可

修改后的代码 #

const constants = {
     ADDRESS_PROHIBITED_WORDS:'POBOX|POSTBOX|POSTBUS|P.O.B.O.X|PO BOX|POST BOX'
 }

// 正则转义函数：处理违禁词中的特殊字符
const escapeRegExp = (str) => {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

const checkForProhibitedWords = (userInput) => {
  // 拆分违禁词并转义每个词的特殊字符
  const prohibitedWords = constants.ADDRESS_PROHIBITED_WORDS.split('|').map(word => escapeRegExp(word));
  // 构建正则：匹配任意一个违禁词，忽略大小写
  const prohibitedRegex = new RegExp(prohibitedWords.join('|'), 'i');
  // 检查输入是否包含违禁词
  const hasProhibited = prohibitedRegex.test(userInput);
  
  console.log('---->> checking', hasProhibited);
  if (hasProhibited) {
    console.log('Error triggered');
  } else {
    console.log('Error removed');
  }
  return hasProhibited;
}

// 测试用例
checkForProhibitedWords('pobox 27 gujarat inida'); // 返回true
checkForProhibitedWords('PO BOX 123 street'); // 返回true
checkForProhibitedWords('123 main street'); // 返回false

方案优势 #

• 完美支持带空格的违禁词校验，无需拆分用户输入
• 自动处理违禁词中的特殊字符，避免正则匹配逻辑出错
• 性能高效：一次正则匹配完成所有违禁词检查，适配100个违禁词的场景
• 完全符合需求：未修改原始违禁词常量，仅处理输入和校验逻辑

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