JavaScript 获取URL

在Web开发中，经常需要从URL中获取参数，在JavaScript中可以通过几种方式来获取URL和它包含的参数。本文将向您介绍如何使用JavaScript获取URL。

方法一：window.location

可以通过window.location对象来获取当前页面（或指定页面）的URL。该对象包含了当前页面URL的所有信息，包括协议、域名、端口号、路径、查询参数和片段。

获取当前页面URL

const currentUrl = window.location.href;
console.log(currentUrl);

该代码将返回包含当前页面URL的字符串。

获取当前页面协议

const protocol = window.location.protocol;
console.log(protocol);

该代码将返回当前页面使用的协议，如“http:”或“https:”。

获取当前页面域名

const domain = window.location.hostname;
console.log(domain);

该代码将返回当前页面的域名。

获取当前页面路径名（不包含查询参数和片段）

const pathname = window.location.pathname;
console.log(pathname);

该代码将返回当前页面的路径名。

获取当前页面查询参数

const search = window.location.search;
console.log(search);

该代码将返回当前页面的查询参数，以问号“?”开头。

获取当前页面片段

const hash = window.location.hash;
console.log(hash);

该代码将返回当前页的片段，以井号“#”开头。

方法二：正则表达式

可以使用正则表达式来获取URL中的参数。

获取查询参数

const queryString = window.location.search;
const regex = /[?&](\w+)=(\w+)/g;
const queryParams = {};
let match;
while (match = regex.exec(queryString)) {
    queryParams[match[1]] = match[2];
}
console.log(queryParams);

该代码将返回一个包含查询参数的对象。例如，对于URL “http://example.com/?name=John&age=30” ，将返回：{name: "John", age: "30"}。

获取片段

const hashString = window.location.hash;
const hashRegex = /#(\w+)/;
const hashParams = hashRegex.exec(hashString);
console.log(hashParams[1]);

该代码将返回URL片段中的值。

方法三：URLSearchParams

可以使用URLSearchParams对象来获取查询参数。

获取查询参数

const queryParams = new URLSearchParams(window.location.search);
console.log(queryParams.get('name'));
console.log(queryParams.get('age'));

该代码将返回查询参数的值。例如，对于URL “http://example.com/?name=John&age=30” ，将返回：“John”和“30”。

结论

以上是在JavaScript中获取URL的方法。使用这些方法中的任何一种都可以轻松地获取URL中的信息，并且可以根据需要轻松地处理它们。