在 JavaScript 中获取 URL

在 JavaScript 中获取 URL 是很常见的需求，这可以让我们在当前页面中获取地址和查询参数，进而进行相应的操作。本文将介绍在 JavaScript 中获取 URL 相关的知识点。

获取 URL

要获取 URL，我们可以使用 JS 的 window.location.href 属性，它会返回页面的完整 URL。

console.log(window.location.href);
// 输出：https://www.example.com/pathname/?search=test#hash

如果我们只需要获取 URL 的一部分，比如只需要获取协议名或主机名等，JS 中还提供了其他的属性来实现。

window.location.protocol：获取 URL 的协议名

console.log(window.location.protocol);
// 输出：https:

window.location.hostname：获取 URL 的主机名

console.log(window.location.hostname);
// 输出：www.example.com

window.location.port：获取 URL 的端口号

console.log(window.location.port);
// 输出：

window.location.pathname：获取 URL 的路径部分

console.log(window.location.pathname);
// 输出：/pathname/

window.location.search：获取 URL 的查询字符串部分

console.log(window.location.search);
// 输出：?search=test

window.location.hash：获取 URL 的锚部分

console.log(window.location.hash);
// 输出：#hash

解析查询参数

获取 URL 中的查询参数也是很常见的需求，比如我们需要从 URL 中获取某个参数的值。下面介绍两种方式来解析查询参数。

使用 URLSearchParams

URLSearchParams 是一个新的标准 API，它提供了一个方便的方式来解析和操作查询参数。

const params = new URLSearchParams(window.location.search);
console.log(params.get('search')); // 输出：test

URLSearchParams 对象提供了多种方法来解析查询参数：

• append(name, value)：添加一个新的查询参数
• delete(name)：删除指定名称的查询参数
• entries()：返回一个迭代器，用于遍历所有的查询参数
• get(name)：返回指定名称的查询参数值
• getAll(name)：返回指定名称的查询参数的所有值
• has(name)：判断是否存在指定名称的查询参数
• keys()：返回一个迭代器，用于遍历所有的查询参数名称
• set(name, value)：设置指定名称的查询参数值
• sort()：按字母顺序对所有的查询参数进行排序
• toString()：返回序列化后的查询字符串
• values()：返回一个迭代器，用于遍历所有的查询参数的值

使用自己的代码解析

如果想要自己编写解析查询参数的代码，可以使用一些常用的函数来实现。

function getQueryString(name) {
  const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  const search = window.location.search.substr(1);
  const res = search.match(reg);
  if (res === null) return null;
  return decodeURIComponent(res[2]);
}

console.log(getQueryString('search')); // 输出：test

上面的代码使用了正则表达式和字符串方法来解析查询参数。其中：

• RegExp 构造函数用来创建正则表达式，这里使用了 ^、&、=、$、i 等元字符来匹配查询参数。
• String.match() 方法用来对字符串进行正则表达式匹配，匹配成功返回一个数组，其中第一个元素是全部匹配的子串，第二个元素是第一个捕获组的子串，第三个元素是第二个捕获组的子串，以此类推。本例中第二个元素就是查询参数的值。
• decodeURIComponent 函数用来解码 URL 编码的字符，比如 %20 解码成空格。

总结

上文介绍了在 JavaScript 中获取 URL 的方法，以及解析查询参数的两种方式。这些知识点是开发 Web 应用程序时非常重要的基础技能。