「这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战」。
获取浏览器中url的参数
Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
| Location 对象 | Location 对象包含有关当前 URL 的信息 |
|---|---|
| hash | 设置或返回从井号 (#) 开始的 URL（锚） |
| host | 设置或返回主机名和当前 URL 的端口号 |
| hostname | 设置或返回当前 URL 的主机名 |
| href | 设置或返回完整的 URL |
| pathname | 设置或返回当前 URL 的路径部分 |
| port | 设置或返回当前 URL 的端口号 |
| protocol | 设置或返回当前 URL 的协议 |
| search | 设置或返回从问号 (?) 开始的 URL（查询部分） |
- 第一种 字符串截取
function getUrl(url){
let arr = url.split('?');
let params = arr[1].split('&');
let obj = {};
for(let i=0;i<params.length;i++){
let param = params[i].split('=');
obj[param[0]] = param[1];
}
return obj;
}
getUrl("www.baidu.com/js?name=baidu&age=21&page=2")
// {name: "baidu", age: "21", page: "2"}
- 第二种 正则匹配
\w 匹配字母、数字、下划线。等价于 [A-Za-z0-9_]
// 当正则没有分组的时候
// 第一个参数是正则捕获到的内容
// 第二个参数是捕获的内容在原字符串中的索引位置
// 第三个参数是原字符串
'qwer-dewd'.replace(/-/g,(a,b, c)=>{console.log(a,b, c)}) // - 4 qwer-dewd
// 当正则有分组的时候
// 第一个参数是正则捕获到的内容
// 第二个参数开始各个分组（子正则）查找到的内容
// 倒数第二个参数是总正则捕获的内容在原字符串中的索引位置
// 最后一个参数是原字符串
'qwer-dewd'.replace(/-(\w+)/g,(a,b,c,d)=>{console.log(a,b,c,d)}) // -dewd dewd 4
正则处理
function parse(str = window.location.search) {
const reg = /([^?&=]+)=([^&]+)/g // 分组捕获 两个子组
const params = {}
str.replace(reg, (_, k, v) => params[k] = v)
return params
}
parse("www.baidu.com/js?name=baidu&age=21&page=2")
// name=baidu name baidu
// age=21 age 21
// page=2 page 2
// {name: "baidu", age: "21", page: "2"}
//正则这样简单写好多
创建并返回一个
URL对象，该URL对象引用使用绝对URL字符串，相对URL字符串和基本URL字符串指定的URL。
URLSearchParams对象，可用于访问search中找到的各个查询参数。
- 第三种 利用URL searchParams属性
let url = 'https://juejin.cn/post/6950554221242499103?utm_source=gold_browser_extension&name=eee&abc';
let urlMap = {};
for (let key of (new URL(url)).searchParams.entries()) {key[1]?urlMap[key[0]] =key[1]:''}
//for (const [key, value] of (new URL(url)).searchParams.entries()) {}
//修改URL 使用append set 之后 通过toString()替换旧值
URLSearchParams构造函数不会解析完整 URL，但是如果字符串起始位置有?的话会被去除。g一个实现了
URLSearchParams的对象可以直接用在for...of结构中返回一个
URLSearchParams对象。
URLSearchParams.entries()返回一个iterator可以遍历所有键/值对的对象。
URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。
var paramsString = "q=URLUtils.searchParams&topic=api"
var searchParams = new URLSearchParams(paramsString);
for (let p of searchParams) {
console.log(p);
}
searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"
兼容性
如果浏览器尚不支持
URL()构造函数，则可以使用Window中的Window.URL属性。 确保检查您的任何目标浏览器是否要求对此添加前缀。
