正则表达式替换URL中的数字与斜杠为连字符的问题

问题分析 #

你之前的正则const className = routeUrl.replace(/([0-9]+)\//, '').replace(/[/]/g, '-');存在两个核心问题：

• 仅能匹配一次数字加斜杠的组合，无法覆盖URL中多处出现数字的场景
• 无法识别URL末尾的数字（后面无斜杠的情况），导致这类数字无法被移除

修正方案 #

使用以下代码可满足所有预期场景的需求：

const className = routeUrl.replace(/\/\d+(\/|$)/g, '').replace(/\//g, '-');

正则逻辑解释 #

• /\/\d+(\/|$)/g：
  • \/：匹配数字前的斜杠
  • \d+：匹配一个或多个连续数字
  • (\/|$)：匹配数字后的斜杠，或者URL的结尾（处理数字在路径末尾的情况）
  • g：全局匹配标记，确保所有符合规则的数字段都被移除
• 第二步replace(/\//g, '-')：将剩余路径中的斜杠全部替换为连字符

场景验证 #

1. orders/detail/544 → 移除/544后得到orders/detail，替换斜杠为- → orders-detail
2. orders/detail/544/edit → 移除/544/后得到orders/detail/edit，替换斜杠为- → orders-detail-edit
3. users/edit/2 → 移除/2后得到users/edit，替换斜杠为- → users-edit

内容的提问来源于stack exchange，提问作者RAHUL KUNDU