js（JavaScript） 解析url地址
学思创
858
在 JavaScript 中解析 URL 地址通常使用内置的 URL 对象。这个对象提供了一种简单而强大的方法来解析、操作和构建 URL。以下是一些常见的用法示例：
1. 创建 URL 对象
首先，你需要创建一个 URL 对象。你可以传入一个字符串形式的 URL 来初始化这个对象。
const urlStr = 'https://xsc.sxcrun.com/userarticle/detail/id/249';
const url = new URL(urlStr);2. 访问 URL 的各个部分
URL 对象提供了许多属性，可以方便地访问 URL 的各个部分：
href: 完整的 URL 字符串。protocol: 协议部分（如https:）。hostname: 主机名（如example.com）。port: 端口号（如8080）。pathname: 路径名（如/pathname/）。search: 查询字符串（包括?，如?search=test）。searchParams: 一个URLSearchParams对象，用于处理查询参数。hash: 哈希部分（包括#，如#hash）。
console.log(url.href); // 'https://xsc.sxcrun.com/userarticle/detail/id/249'
console.log(url.protocol); // 'https:'
console.log(url.hostname); // 'xsc.sxcrun.com'
console.log(url.port); // ''
console.log(url.pathname); // '/userarticle/detail/id/249'
console.log(url.search); // ''
console.log(url.hash); // ''3. 使用 URLSearchParams 对象处理查询参数
URLSearchParams 对象提供了许多方法来操作查询参数：
get(name): 获取指定名称的第一个参数值。set(name, value): 设置指定名称的参数值。append(name, value): 添加一个新的参数值（不覆盖已有值）。delete(name): 删除指定名称的参数。has(name): 检查是否存在指定名称的参数。keys(): 返回一个迭代器，包含所有参数的名称。values(): 返回一个迭代器，包含所有参数的值。entries(): 返回一个迭代器，包含所有参数的[name, value]对。
const params = url.searchParams;
console.log(params.get('id')); // ''
params.append('newParam', 'newValue');
console.log(url.toString()); // 'https://xsc.sxcrun.com/userarticle/detail/id/249?newParam=newValue'
params.set('search', 'updatedValue');
console.log(url.toString()); // 'https://xsc.sxcrun.com/userarticle/detail/id/249?search=updatedValue&newParam=newValue'
params.delete('newParam');
console.log(url.toString()); // 'https://xsc.sxcrun.com/userarticle/detail/id/249?search=updatedValue'4. 修改 URL 并重新构建
你可以修改 URL 对象的属性，然后重新构建 URL。
url.pathname = '/home/search';
url.searchParams.set('key', 'swoole');
console.log(url.toString()); // 'https://xsc.sxcrun.com/home/search?key=swoole'通过这些方法，你可以轻松地在 JavaScript 中解析和操作 URL。