js如何获取url链接

JavaScript获取URL链接的方法有很多种，包括使用window.location对象、URL对象等。window.location.href、window.location.origin、window.location.pathname等是常用的获取URL信息的属性。

window.location.href 是最常用的一种方法，可以直接获取当前页面的完整URL。通过这个属性，你不仅可以获取URL，还可以对其进行修改，从而实现页面的跳转。

一、window.location对象

1. window.location.href

window.location.href 返回当前页面的完整URL。你可以通过下面的代码获取它：

var currentURL = window.location.href;

console.log(currentURL);

这个属性不仅可以获取URL，也可以设置URL从而实现页面跳转。例如：

window.location.href = 'https://www.example.com';

2. window.location.origin

window.location.origin 返回当前URL的协议、域名和端口号。例如：

var origin = window.location.origin;

console.log(origin);

如果当前页面的URL是 https://www.example.com:8080/pathname/?search=test#hash，那么 window.location.origin 返回 https://www.example.com:8080。

3. window.location.pathname

window.location.pathname 返回URL的路径部分。例如：

var pathname = window.location.pathname;

console.log(pathname);

如果当前页面的URL是 https://www.example.com/pathname/?search=test#hash，那么 window.location.pathname 返回 /pathname/。

二、URL对象

1. 创建URL对象

JavaScript中的URL对象提供了更加细粒度的操作。你可以通过它解析和操作URL。创建URL对象的方法如下：

var url = new URL('https://www.example.com:8080/pathname/?search=test#hash');

console.log(url);

2. 获取URL各部分

URL对象提供了多种属性，可以获取URL的各个部分。例如：

console.log(url.href);       // 'https://www.example.com:8080/pathname/?search=test#hash'

console.log(url.origin);     // 'https://www.example.com:8080'
console.log(url.protocol);   // 'https:'
console.log(url.host);       // 'www.example.com:8080'
console.log(url.hostname);   // 'www.example.com'
console.log(url.port);       // '8080'
console.log(url.pathname);   // '/pathname/'
console.log(url.search);     // '?search=test'
console.log(url.hash);       // '#hash'

三、获取URL参数

1. URLSearchParams对象

URLSearchParams对象可以方便地操作URL中的查询参数。你可以这样使用：

var urlParams = new URLSearchParams(window.location.search);

var paramValue = urlParams.get('search'); // 假设URL是 ?search=test
console.log(paramValue); // 'test'

2. 迭代URL参数

你还可以通过迭代URLSearchParams对象来获取所有参数：

urlParams.forEach((value, key) => {

    console.log(`${key}: ${value}`);
});

四、修改URL

1. 修改查询参数

你可以通过URLSearchParams对象修改查询参数：

urlParams.set('search', 'newTest');

console.log(urlParams.toString()); // 'search=newTest'

然后你可以将修改后的查询参数重新组合成新的URL：

var newURL = `${window.location.origin}${window.location.pathname}?${urlParams.toString()}`;

console.log(newURL);

2. 修改其他URL部分

通过URL对象，你还可以修改URL的其他部分：

url.pathname = '/newPathname/';

console.log(url.href); // 'https://www.example.com:8080/newPathname/?search=test#hash'

五、URL编码与解码

1. encodeURIComponent与decodeURIComponent

在处理URL时，编码与解码是非常重要的。你可以通过 encodeURIComponent 和 decodeURIComponent 来编码和解码URL参数：

var encodedParam = encodeURIComponent('param with spaces');

console.log(encodedParam); // 'param%20with%20spaces'
var decodedParam = decodeURIComponent(encodedParam);
console.log(decodedParam); // 'param with spaces'

2. encodeURI与decodeURI

如果你需要对整个URL进行编码与解码，可以使用 encodeURI 和 decodeURI：

var encodedURL = encodeURI('https://www.example.com/pathname/?search=param with spaces#hash');

console.log(encodedURL); // 'https://www.example.com/pathname/?search=param%20with%20spaces#hash'
var decodedURL = decodeURI(encodedURL);
console.log(decodedURL); // 'https://www.example.com/pathname/?search=param with spaces#hash'

六、总结

通过以上介绍，你应该对JavaScript中获取和操作URL的方法有了全面的了解。window.location对象 提供了简单快捷的方式来获取和操作当前页面的URL，URL对象 提供了更细粒度的操作和解析功能。URLSearchParams对象 则让你可以方便地处理查询参数。最后，URL编码与解码 则是处理URL字符串时不可或缺的工具。希望这些内容能够帮助你更好地理解和使用JavaScript来操作URL。

相关问答FAQs：

1. 如何使用JavaScript获取当前页面的URL链接？

使用JavaScript可以轻松获取当前页面的URL链接。您可以使用以下代码：

var currentUrl = window.location.href;

这将返回一个包含当前页面URL的字符串值。

2. 如何从URL链接中提取参数？

如果您想从URL链接中提取参数，可以使用JavaScript的URLSearchParams API。以下是一个示例代码：

var urlParams = new URLSearchParams(window.location.search);
var paramValue = urlParams.get('paramName');

这将获取名为'paramName'的参数的值，并将其存储在变量paramValue中。

3. 如何在JavaScript中修改URL链接的参数？

如果您想在JavaScript中修改URL链接的参数，可以使用URLSearchParams API。以下是一个示例代码：

var urlParams = new URLSearchParams(window.location.search);
urlParams.set('paramName', 'paramValue');
var newUrl = window.location.pathname + '?' + urlParams.toString();
window.history.replaceState({}, '', newUrl);

这将将名为'paramName'的参数的值更改为'paramValue'，并更新URL链接，而不会刷新页面。