从 URL 中删除主机名 JavaScript

在前端开发中，我们经常需要从 URL 中提取出不同的信息。不过在一些场景下，我们需要将 URL 中的主机名删除，只保留路径以及查询参数。这篇文章将介绍 JavaScript 中如何从 URL 中删除主机名。

使用 URL 类型

JavaScript 引入了 URL 类型，用于解析和操作 URL。我们可以使用 new URL() 方法来创建一个 URL 对象，然后对它进行各种操作。

const urlStr = 'https://www.example.com/path/to/file?query=param';
const url = new URL(urlStr);

console.log(url.pathname); // "/path/to/file"
console.log(url.search);   // "?query=param"

在上面的代码中，我们首先创建了一个字符串类型的 URL，然后使用 new URL() 方法将它转换为 URL 对象。我们可以通过 URL 对象的 pathname 属性获取到 URL 的路径，通过 search 属性获取到查询参数。

但是，我们需要从 URL 中删除主机名，才能达到我们的目的。可以在创建 URL 对象时，将其作为第二个参数传递进去，指定基本 URL，然后再将 URL 对象的 href 属性中的主机名部分删除即可。

const urlStr = 'https://www.example.com/path/to/file?query=param';
const baseUrl = 'https://www.example.com/';
const url = new URL(urlStr, baseUrl);

const pathAndQuery = url.href.replace(baseUrl, '');

console.log(pathAndQuery); // "/path/to/file?query=param"

在上面的代码中，我们将 baseUrl 参数设置为 https://www.example.com/，令 URL 对象只解析出路径和查询参数部分。然后使用 replace() 方法将 URL 的主机名部分替换为空字符串，最终得到了一个只包含路径以及查询参数的字符串。

使用正则表达式

另一种将 URL 中的主机名删除的方法，是使用正则表达式。这种方法不需要引入 URL 类型，但可能需要写更多的代码。

const urlStr = 'https://www.example.com/path/to/file?query=param';

const pattern = /^https:\/\/www\.example\.com(.*)$/;
const pathMatch = urlStr.match(pattern);

if (pathMatch) {
  console.log(pathMatch[1]); // "/path/to/file?query=param"
}

在上面的代码中，我们使用了一个匹配 URL 的正则表达式，将其以捕获组的形式提取出路径和查询参数。其中，正则表达式的 ^ 符号表示以什么开头，$ 符号表示以什么结尾，.* 表示匹配任意字符任意次数，\. 表示匹配点号，需要加上反斜杠转义。

最终，我们得到了一个包含路径和查询参数的捕获组，可以通过 match() 方法获得。如果匹配成功，match() 方法返回一个数组，数组的第一个元素为匹配的整个字符串，而捕获组对应的元素则是数组的第二个及以后的元素。所以我们只需要取出第二个元素即可。如果匹配不成功，match() 方法返回 null。

总结

本文介绍了两种将 URL 中的主机名删除的方法：使用 URL 类型和使用正则表达式。两种方法各有优缺点，具体使用哪种方式取决于开发者的个人偏好。但无论使用哪种方法，了解 URL 的基本知识和正则表达式都是必不可少的。