Angular项目如何在用户复制URL时将路径转为带查询参数格式

该方案无需修改web.config配置，直接在前端层面拦截复制操作，自动将路径参数格式转换为查询参数格式，解决路径无法正常解析的问题。

实现思路 #

通过监听全局copy事件，拦截用户复制的内容，匹配目标路径格式后自动替换为查询参数格式，再写入剪切板即可实现需求。

步骤1：添加全局copy事件监听 #

推荐在Angular项目的根组件app.component.ts中添加监听逻辑，确保全页面生效：

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @HostListener('document:copy', ['$event'])
  onCopy(event: ClipboardEvent): void {
    // 获取用户选中的复制内容
    const copiedText = window.getSelection()?.toString() || '';
    // 匹配 page/item/xxx 格式的路径
    const pathReg = /page\/item\/(\d+)/;
    if (pathReg.test(copiedText)) {
      // 阻止默认复制行为
      event.preventDefault();
      // 替换为查询参数格式
      const modifiedText = copiedText.replace(pathReg, 'page/item?id=$1');
      // 将修改后的内容写入剪切板
      event.clipboardData?.setData('text/plain', modifiedText);
    }
  }
}

步骤2：扩展适配其他路径（可选） #

如果有其他类似的路径需要转换，只需要修改正则匹配规则即可，比如要适配page/product/456转page/product?id=456，可以把正则修改为：
const pathReg = /page\/(\w+)\/(\d+)/
替换逻辑改为：'page/$1?id=$2'

效果验证 #

部署上线后，用户选中page/item/123格式的路径执行复制操作时，剪切板中实际存储的内容会自动变为page/item?id=123，粘贴后即可直接正常访问。

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