Next.js中如何编写正则校验URL字符串是否含至少3个/字符

最终正则 #

/^(?:[a-zA-Z0-9-]*\/){3,}[a-zA-Z0-9-]*$/

规则说明 #

• ^ 匹配字符串起始位置，避免前缀出现非法字符
• (?:[a-zA-Z0-9-]*\/) 非捕获组，匹配任意数量的合法非斜杠字符（大小写字母、数字、连字符）加一个斜杠
• {3,} 限定上述组至少出现3次，即整个字符串至少包含3个斜杠，且斜杠不需要连续
• [a-zA-Z0-9-]* 匹配最后一个斜杠之后剩余的合法字符
• $ 匹配字符串结束位置，避免后缀出现非法字符

Next.js 中使用示例 #

// 路径校验函数
const isValidCustomPath = (pathStr) => {
  const pathReg = /^(?:[a-zA-Z0-9-]*\/){3,}[a-zA-Z0-9-]*$/
  return pathReg.test(pathStr)
}

// 测试用例
console.log(isValidCustomPath("/apple/green-sour/south-spain")) // true
console.log(isValidCustomPath("/red-orange/sweet/north-italy-toscany")) // true
console.log(isValidCustomPath("/kiwi/new-zealan")) // false 仅2个斜杠
console.log(isValidCustomPath("/fruit/apple@2x/red/sweet")) // false 含非法字符@

常见误区说明 #

你之前整理的[/]{3}规则只能匹配连续出现的3个斜杠（比如///test），不符合需求中斜杠分散出现的场景，因此需要用分组重复的方式统计斜杠总数量。

内容的提问来源于stack exchange，提问作者Ives E.