如何修复TypeScript中substring逻辑以正确校验输入URL前缀？

需求：用户输入URL前缀时，遍历指定URL对象，仅当输入内容与所有URL的前缀均不匹配时返回错误信息。例如输入"www.ca"时应报错，输入"w""ww"`等匹配任一URL前缀时不报错。

指定URL对象：

export const urlStrings: { [key: string]: string } = {
  'www.costco.com': '',
  'www.walmart.com': '',
  'www.google.com': '',
  'www.facebook.com': '',
}

当前代码问题：原校验函数中subString变量初始值设为1，仅能逐字符递增匹配首字符，无法实现“输入内容作为完整前缀与URL匹配”的逻辑，导致校验失效。现有TypeScript校验函数：

const correctUrl = (value: string | null): string => {
  let errorMessage = ''
  let item: string
  let subString = 1

  if (value && typeof value === 'string') {
    // eslint-disable-next-line guard-for-in
    for (item in urlStrings) {

      if (value?.length <= item?.length && subString <= item?.length) {
        if (item.substring(0, subString) === value.substring(0, subString)) {
          errorMessage = ''
          break
        }
      }
      subString += 1
    }
  } else {
    errorMessage = 'Throw error'
  }
  return errorMessage
}

修复后的校验函数 #

const correctUrl = (value: string | null): string => {
  // 默认设置错误信息，匹配到合法前缀则清空
  let errorMessage = '输入的URL前缀不合法';

  if (value && typeof value === 'string') {
    // 获取所有目标URL列表
    const targetUrls = Object.keys(urlStrings);
    
    for (const url of targetUrls) {
      // 检查输入内容是否是当前URL的前缀
      if (url.startsWith(value)) {
        errorMessage = '';
        break; // 找到匹配项后终止遍历
      }
      // 若不想使用startsWith，可替换为substring写法：
      // if (value.length <= url.length && url.substring(0, value.length) === value) {
      //   errorMessage = '';
      //   break;
      // }
    }
  } else {
    errorMessage = '请输入有效的URL前缀';
  }

  return errorMessage;
};

关键修改说明 #

• 移除无效的subString变量：直接基于输入值的完整长度做前缀匹配，符合需求中“输入子串作为完整前缀校验”的逻辑，避免原代码逐字符匹配的错误逻辑。
• 调整错误信息初始状态：默认设为“不合法”，找到匹配项则清空，逻辑更严谨（原代码初始为空，易出现未匹配时错误信息未更新的问题）。
• 优化遍历方式：用Object.keys(urlStrings)获取URL列表，替代for-in遍历，避免原型链污染风险，同时符合ESLint规范（无需禁用guard-for-in规则）。
• 简化前缀判断逻辑：使用url.startsWith(value)直接判断前缀匹配，代码更易读且不易出错；若需兼容旧环境，可替换为substring手动截取的写法。
• 明确空值错误提示：将原模糊的'Throw error'改为更清晰的'请输入有效的URL前缀'。

测试验证 #

• 输入"w"：匹配所有URL前缀，返回空字符串（无错误）。
• 输入"www.ca"：无URL以该字符串为前缀，返回'输入的URL前缀不合法'。
• 输入"www.co"：匹配www.costco.com前缀，返回空字符串。
• 输入null或空字符串：返回'请输入有效的URL前缀'。

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