如何实现包含#和冒号的特殊URL重定向跳转？

# 后的内容属于URL的fragment（片段标识符），默认不会随HTTP请求发送到服务端，不管是Nginx/Apache层的重写规则，还是常规WordPress重定向插件，都拿不到#mytest:parta这类锚点内容，自然无法完成匹配跳转，这是之前方案失效的根本原因。

方案1：全局JS重定向（适配WordPress场景，部署最简单） #

直接在站点全局头部插入JS逻辑，页面加载初期就读取锚点做匹配跳转，不用改服务端配置。

• 先整理旧锚点和新URL的映射关系，把下面的代码放到站点<head>标签最靠前的位置，优先执行避免页面闪屏：

<script>
// 按实际业务补充所有跳转映射
const redirectRule = {
  'mytest:parta': '/new/path/parta/',
  'mytest:partb': '/new/path/partb/',
  'mytest:partc': '/new/path/partc/',
  'yourtest:partx': '/new/path/partx/',
  'yourtest:partz': '/new/path/partz/'
};
const anchor = window.location.hash.slice(1); // 去掉锚点开头的#
if (redirectRule.hasOwnProperty(anchor)) {
  window.location.replace(redirectRule[anchor]);
}
</script>

• WordPress站点不用额外装插件，两种方式插入即可：一是用主题自带的「自定义头部脚本」功能直接粘贴代码；二是如果主题没提供该功能，编辑子主题的header.php文件，把代码放到</head>标签前即可。

方案2：路径级隔离重定向（无全局冗余代码） #

如果不想给全站页面加JS逻辑，可以单独给/test/路径配置返回极简过渡页，只在访问旧路径时加载跳转逻辑，不影响其他页面性能。
以Nginx为例，直接在配置里加如下规则即可，Apache、WordPress自定义页面模板也能实现同款逻辑：

location = /test/ {
  default_type text/html;
  return 200 '<!DOCTYPE html><html><head><meta charset="utf-8"><script>const redirectRule={"mytest:parta":"/new/path/parta/","mytest:partb":"/new/path/partb/","mytest:partc":"/new/path/partc/","yourtest:partx":"/new/path/partx/","yourtest:partz":"/new/path/partz/"};const a=window.location.hash.slice(1);if(redirectRule[a]){window.location.replace(redirectRule[a])}</script></head><body></body></html>';
}

• 跳转必须用window.location.replace()，不要用window.location.href赋值，前者不会把旧URL留在浏览器历史栈里，避免用户点返回按钮触发循环跳转，语义也更贴近永久重定向。
• 如果旧URL锚点有统一命名规则，不用写死全量映射，可以用正则做批量匹配，降低后续规则维护成本。
• 主流搜索引擎都能识别页面加载初期的JS跳转，只要代码放在头部优先执行，不会影响旧URL的权重迁移。

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