几种获取浏览器中url参数的方式 |
您所在的位置:网站首页 › 获取url地址的协议类型 › 几种获取浏览器中url参数的方式 |
「这是我参与11月更文挑战的第14天,活动详情查看:2021最后一次更文挑战」。 获取浏览器中url的参数 Location 对象包含有关当前 URL 的信息。Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。 Location 对象Location 对象包含有关当前 URL 的信息hash设置或返回从井号 (#) 开始的 URL(锚)host设置或返回主机名和当前 URL 的端口号hostname设置或返回当前 URL 的主机名href设置或返回完整的 URLpathname设置或返回当前 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{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"} //正则这样简单写好多new URL() 创建并返回一个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属性。 确保检查您的任何目标浏览器是否要求对此添加前缀。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |