如何使用JavaScript修改URL部分内容并跳转到新地址？

阿华AIGC实验室

2026-5-22

如何用JavaScript修改URL并导航到新地址？

嘿，这个需求在前端开发里挺常见的，我给你分享两种实用的实现方式，分别对应简单场景和更健壮的通用场景：

方法一：直接字符串替换（适合简单固定模式）

如果你的URL结构比较固定，就像例子里的www.site.com/img-small-1.jpg要改成www.site.com/img-large-1.jpg，直接用字符串的replace()方法就能搞定，代码非常直观：

// 获取当前页面的完整URL
const currentUrl = window.location.href;
// 把URL里的"-small-"替换成"-large-"
const newUrl = currentUrl.replace('-small-', '-large-');
// 跳转到修改后的地址
window.location.href = newUrl;

这种方式的优点是简单快捷，适合替换规则单一的情况，但如果URL里有多个类似的字符串（比如查询参数里也有-small-），可能会误替换，所以要根据实际场景判断。

方法二：使用URL API（推荐，更健壮）

如果你需要处理更复杂的URL结构（比如带查询参数、哈希值，或者不确定URL的具体格式），推荐用浏览器原生的URL对象，它能帮你安全地解析和修改URL的各个部分：

// 创建URL对象，传入当前页面的URL
const url = new URL(window.location.href);
// 只修改路径部分的指定内容
url.pathname = url.pathname.replace('-small-', '-large-');
// 把修改后的URL转成字符串，然后跳转
window.location.href = url.toString();

URL对象会自动帮你拆分URL的协议、域名、路径、查询参数等部分，修改路径的时候不会影响其他部分，比如如果原URL是https://www.site.com/img-small-1.jpg?param=1，修改后会保留查询参数，变成https://www.site.com/img-large-1.jpg?param=1，非常安全。

如果是处理给定的字符串URL（不是当前页面的），可以这样写：

const originalUrl = 'www.site.com/img-small-1.jpg';
// 注意：URL对象需要完整的协议（比如https://），所以这里补全一下
const url = new URL(`https://${originalUrl}`);
url.pathname = url.pathname.replace('-small-', '-large-');
// 如果需要去掉协议前缀，可以再处理（实际跳转一般需要完整URL）
const newUrl = url.toString().replace('https://', '');
console.log(newUrl); // 输出 "www.site.com/img-large-1.jpg"