在 JavaScript 中查找基本 URL

在 JavaScript 中，我们可以使用 location 对象来获取当前页面的 URL。而在这个 URL 中，我们也可以通过解析其各个部分来获得基本 URL。

基本 URL 的组成

URL 由多个部分组成，其中包括：

• 协议 (protocol)：即 http、https、ftp 等，表示数据传输协议。
• 域名 (domain)：即 www.example.com 等。
• 端口号 (port)：表示服务器监听的端口号，它通常是由协议决定的，默认为 80。
• 路径 (path)：即 /index.html 等，表示请求的资源路径。

对于一个完整的 URL（比如 https://www.example.com:8080/index.html），我们可以通过正则表达式来分解其各个部分：

const url = 'https://www.example.com:8080/index.html';
const urlPattern = /^(.*?):\/\/(.*?)(?::(\d+))?(\/.*?)?$/;
const [, protocol, domain, port, path] =
  url.match(urlPattern) || [];

console.log(`Protocol: ${protocol}`);
console.log(`Domain: ${domain} (Port: ${port || '80'})`);
console.log(`Path: ${path || '/'}`);

这里使用了一个正则表达式，将 URL 分解为 protocol、domain、port 和 path 四个部分。通过正则表达式的匹配结果，我们可以获取这四个部分的内容，并将其输出到控制台中。

获取基本 URL

在高级浏览器中，我们可以使用 URL 对象来获取基本 URL：

const url = new URL(window.location.href);
const baseUrl = `${url.protocol}//${url.hostname}${url.port ? `:${url.port}` : ''}`;

console.log(`Base URL: ${baseUrl}`);

这个方法通过 window.location.href 获取当前页面的 URL，并通过 new URL 创建一个 URL 对象。在这个 URL 对象中，我们可以获取 protocol、hostname 和 port 这三个部分，并使用 ${} 的方式拼接出基本 URL。

注意，在获取 port 时，我们需要判断它是否存在，如果存在则需要将其添加到基本 URL 中。

总结

在 JavaScript 中查找基本 URL 的方法有多种，既可以使用正则表达式，也可以使用 URL 对象。无论使用哪种方法，我们都可以通过获取 protocol、domain、port 和 path 这四个部分来拼接出基本 URL，以方便后续的操作。