JavaScript如何从URL提取页面名称，适配有无末尾斜杠场景

最简实现方案（原生JS，无需jQuery） #

仅需1行代码即可适配有无末尾斜杠的两种场景：

const pageName = window.location.href.replace(/\/$/, '').split('/').pop();

逻辑说明 #

• 正则/\/$/专门匹配URL末尾的斜杠，有则替换为空，无则保留原URL内容，省去手动写if判断分支的冗余代码
• 处理完成的URL按/分割后取最后一段，即可得到目标页面名称

适配测试验证 #

针对给出的两种URL示例均能正确返回page-name：

• 输入www.website.com/page-name：末尾无斜杠，正则替换不生效，分割取最后一段直接得到page-name
• 输入www.website.com/page-name/：末尾斜杠被替换为空后，分割取最后一段得到page-name

增强版（兼容带查询参数/哈希片段的场景） #

如果存在URL带查询参数（?xxx=xxx）或哈希锚点（#xxx）的情况，可以再加一步前置处理，避免参数影响提取结果：

const pageName = window.location.href
  .replace(/[?#].*$/, '') // 先移除查询参数和哈希片段
  .replace(/\/$/, '') // 移除末尾斜杠
  .split('/')
  .pop();

内容的提问来源于stack exchange，提问作者Kirk Ross