如何使用正则表达式验证包含斜杠的URL Slug

本文旨在提供一个实用的教程，指导开发者如何扩展现有的正则表达式，使其能够正确验证包含正斜杠（`/`）的URL slug。通过修改分隔符表达式，我们能够允许像 `my-parent-page/my-child-page` 这样的分层结构slug，同时保持其原有的字母数字和连字符验证规则，确保URL的有效性和规范性。

理解URL Slug及其验证需求

URL slug是URL中用于标识特定页面或内容的短文本字符串，通常由小写字母、数字和连字符组成，以提高可读性和SEO友好性。例如，product-category 或 article-title-123 都是常见的slug形式。

最初的slug验证正则表达式通常会限制字符串只包含字母、数字和连字符，并确保连字符不会出现在开头或结尾，也不会连续出现。一个典型的例子是：

const rule = new RegExp('^[A-Za-z0-9]+(-[A-Za-z0-9]+)*$');

这个正则表达式的含义是：

• ^: 匹配字符串的开始。
• [A-Za-z0-9]+: 匹配一个或多个字母或数字。这是slug的起始部分。
• (-[A-Za-z0-9]+)*: 匹配零次或多次连字符后跟一个或多个字母或数字的组合。这确保了连字符只作为单词的分隔符。
• $: 匹配字符串的结束。

然而，在某些场景下，我们需要支持具有分层结构的slug，例如 my-parent-page/my-child-page。上述正则表达式会错误地将这种包含斜杠的slug判定为无效，因为它不允许斜杠字符。

扩展正则表达式以支持斜杠

为了允许斜杠字符作为分隔符，我们需要修改正则表达式中定义分隔符的部分。原有的分隔符是连字符 -，现在我们需要允许它也可以是斜杠 /。

关键的修改点在于 (-[A-Za-z0-9]+)* 这个分组。它定义了后续部分的模式：一个分隔符后跟字母数字。我们将分隔符字符集从 [-] 扩展到 [-/]。

修改后的正则表达式如下：

一键职达

AI全自动批量代投简历软件，自动浏览招聘网站从海量职位中用AI匹配职位并完成投递的全自动操作，真正实现'一键职达'的便捷体验。

79

查看详情

const re = new RegExp('^[A-Za-z0-9]+([-/][A-Za-z0-9]+)*$');

让我们分解这个新的正则表达式：

• ^: 匹配字符串的开始。
• [A-Za-z0-9]+: 匹配一个或多个字母或数字。这是slug的起始部分，与之前相同。
• ([-/][A-Za-z0-9]+)*: 这是一个关键的修改。
  • [-/]: 这是一个字符集，表示匹配一个连字符 - 或 一个斜杠 /。
  • [A-Za-z0-9]+: 匹配一个或多个字母或数字。
  • (...)*: 整个分组可以重复零次或多次，意味着slug可以有多个由连字符或斜杠分隔的段。
• $: 匹配字符串的结束。

通过这种方式，my-parent-page/my-child-page 这样的slug现在将被正确验证。

示例代码与测试

以下JavaScript代码演示了如何使用新的正则表达式进行slug验证，并包含了一系列测试用例来验证其行为：

// 新的正则表达式，允许连字符和斜杠作为分隔符
const re = new RegExp('^[A-Za-z0-9]+([-/][A-Za-z0-9]+)*$');

// 测试用例
const egs = [
  'justSlash/justSlash',          // 有效：只包含斜杠
  'just-dash',                    // 有效：只包含连字符
  'dash-and-slash/dash-and-slash',// 有效：混合使用连字符和斜杠
  'my-parent-page/my-child-page', // 有效：原始问题中的示例
  'another-valid-slug',           // 有效：常规slug
  'singleword',                   // 有效：单个单词
  '&crap',                        // 无效：包含非法字符
  '-start-with-dash',             // 无效：以连字符开头
  'end-with-dash-',               // 无效：以连字符结尾
  'double--dash',                 // 无效：双连字符
  'double//slash',                // 无效：双斜杠
  'word/--word',                  // 无效：斜杠后跟双连字符
  'word-/word',                   // 无效：连字符后跟斜杠，但没有字母数字
  'word/-word',                   // 无效：斜杠后跟连字符，但没有字母数字
  'word//word',                   // 无效：双斜杠
  'word/ word',                   // 无效：包含空格
  '123/abc-xyz'                   // 有效：数字和字母混合
];

// 遍历测试用例并输出结果
egs.forEach(eg => {
  console.log(`"${eg}" is ${re.test(eg) ? "match" : "no match"}`);
});

运行上述代码，您将看到以下输出：

"justSlash/justSlash" is match
"just-dash" is match
"dash-and-slash/dash-and-slash" is match
"my-parent-page/my-child-page" is match
"another-valid-slug" is match
"singleword" is match
"&crap" is no match
"-start-with-dash" is no match
"end-with-dash-" is no match
"double--dash" is no match
"double//slash" is no match
"word/--word" is no match
"word-/word" is no match
"word/-word" is no match
"word//word" is no match
"word/ word" is no match
"123/abc-xyz" is match

从输出可以看出，包含单个斜杠的合法slug现在能够被正确匹配，而包含非法字符、以分隔符开头/结尾或连续分隔符的slug依然被拒绝，这符合我们对健壮slug验证的期望。

注意事项与最佳实践

1. 字符集选择： [A-Za-z0-9] 仅包含英文字母和数字。如果您的应用需要支持其他语言的字符（如中文、日文、韩文或其他Unicode字符），您可能需要扩展这个字符集，例如使用 \p{L}\p{N} (需要启用Unicode属性转义) 或更具体的Unicode范围。
2. 正则性能： 对于非常长的字符串，复杂的正则表达式可能会影响性能。然而，对于典型的URL slug长度，上述正则表达式的性能影响可以忽略不计。
3. 语言环境： JavaScript的 RegExp 构造函数和字面量都支持 test() 方法进行匹配。在大多数情况下，使用 RegExp 构造函数来动态构建正则表达式是可行的，尤其当模式字符串来自变量时。
4. 清晰性与可维护性： 尽管正则表达式简洁强大，但过度复杂的表达式会降低可读性。在必要时，可以添加注释或将正则表达式分解为更小的部分，以提高可维护性。
5. 前端与后端验证： 建议在前端和后端都进行slug验证。前端验证提供即时反馈，改善用户体验；后端验证则确保数据完整性和安全性，防止恶意或不规范的数据进入系统。

总结

通过简单地将斜杠字符添加到正则表达式的分隔符字符集中，我们成功地扩展了URL slug的验证逻辑，使其能够支持分层结构。这种修改既保留了原有规则的严谨性，又增加了灵活性，满足了现代Web应用对URL结构多样性的需求。在实际应用中，务必根据具体需求调整字符集和验证规则，以确保slug的有效性和应用的健壮性。

以上就是如何使用正则表达式验证包含斜杠的URL Slug的详细内容，更多请关注php中文网其它相关文章！