请求开发URL字符替换Bookmarklet，实现编辑页新标签跳转

核心需求回顾 #

你需要的Bookmarklet要实现：

• 提取当前页面域名，后面拼接/panel/pages/
• 把原URL的路径部分的/换成+，路径里的空格换成-
• 在新标签页打开转换后的URL

分步开发（新手友好） #

Bookmarklet本质是一段可以存在书签里的JavaScript代码，下面一步步拆解：

1. 获取并解析当前URL

用浏览器原生API直接提取URL信息，不用手动拼字符串：

// 获取当前页面的完整URL并解析
const currentUrl = new URL(window.location.href);
// 提取带协议的域名（比如https://example.com）
const domain = currentUrl.origin;
// 提取路径部分，去掉开头的斜杠（比如原路径/test/page → 变成test/page）
let path = currentUrl.pathname.slice(1);

2. 按规则处理路径格式

用正则全局替换完成格式转换：

// 把路径里所有的/替换成+
path = path.replace(/\//g, '+');
// 把路径里所有的空格替换成-
path = path.replace(/ /g, '-');

全局替换标记g能确保不管路径有多少层级，所有符合条件的字符都会被替换。

3. 拼接新URL并打开

把处理好的部分组合起来，用新标签页打开：

// 拼接最终的编辑页URL
const editUrl = `${domain}/panel/pages/${path}`;
// 在新标签页打开链接
window.open(editUrl, '_blank');

4. 整合成Bookmarklet可用代码

Bookmarklet需要是单行代码，还要加上javascript:前缀（告诉浏览器这是可执行的JS代码），压缩后的最终代码如下：

javascript:(function(){const currentUrl=new URL(window.location.href);const domain=currentUrl.origin;let path=currentUrl.pathname.slice(1);path=path.replace(/\//g,'+').replace(/ /g,'-');const editUrl=`${domain}/panel/pages/${path}`;window.open(editUrl,'_blank');})();

添加到浏览器书签的步骤 #

1. 打开浏览器书签栏（Chrome按Ctrl+Shift+B，Firefox按Ctrl+B）
2. 右键点击书签栏，选择「添加书签」或「新建书签」
3. 名称随便填（比如「跳转到编辑页」）
4. 在「网址」输入框粘贴上面的压缩代码
5. 保存即可

测试验证 #

打开示例页面https://example.com/test/page1/page2/page3/final page，点击书签，检查新标签页打开的URL是否为https://example.com/panel/pages/test+page1+page2+page3+final-page，一致就说明功能正常。

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