js url截取

在JavaScript中，URL截取通常指的是从完整的URL字符串中提取出特定的部分，比如协议、主机名、路径、查询参数等。这可以通过内置的URL对象或者字符串操作方法来实现。

基础概念

URL对象：JavaScript提供了URL构造函数，可以用来解析URL字符串，并提供了一系列属性来访问URL的不同部分。
字符串操作：可以使用字符串的方法如split、substring、indexOf等来手动截取URL的部分内容。

类型

协议截取：提取http、https等协议部分。
主机名截取：提取域名，如www.example.com。
路径截取：提取URL中的路径部分，如/path/to/resource。
查询参数截取：提取URL中的查询字符串，如?key=value。

应用场景

页面跳转：根据URL的不同部分进行页面跳转或重定向。
数据提取：从URL中提取特定参数用于页面展示或数据处理。
路由匹配：在前端路由中，根据URL路径匹配不同的组件或页面。

示例代码

使用URL对象截取URL的部分内容：

const urlString = 'https://www.example.com/path/to/resource?key=value#anchor';

// 创建URL对象
const url = new URL(urlString);

// 获取协议
console.log(url.protocol); // 输出: "https:"

// 获取主机名
console.log(url.hostname); // 输出: "www.example.com"

// 获取路径名
console.log(url.pathname); // 输出: "/path/to/resource"

// 获取查询字符串
console.log(url.search); // 输出: "?key=value"

// 获取特定查询参数
const params = new URLSearchParams(url.search);
console.log(params.get('key')); // 输出: "value"

使用字符串操作方法截取URL的部分内容：

const urlString = 'https://www.example.com/path/to/resource?key=value#anchor';

// 截取协议
const protocol = urlString.split('://')[0];
console.log(protocol); // 输出: "https"

// 截取主机名和路径后部分
const hostAndPath = urlString.split('://')[1];
const host = hostAndPath.split('/')[0];
console.log(host); // 输出: "www.example.com"

// 截取路径
const path = '/' + hostAndPath.split('/').slice(1, -1).join('/');
console.log(path); // 输出: "/path/to"

// 截取查询字符串
const query = urlString.split('?')[1].split('#')[0];
console.log(query); // 输出: "key=value"