您好,登录后才能下订单哦!
这篇文章主要讲解了“怎么使用JavaScript获取URL参数”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么使用JavaScript获取URL参数”吧!
url
地址是字符串形式的,所以利用 split
方法将参数提取出来,该方法比较常用
,而且容易理解(无关正则)
let URL = "http://www.baidu.com?name=小宇&age=25&sex=男&wife=小君"; function getUrlParams(url) { // 通过 ? 分割获取后面的参数字符串 let urlStr = url.split('?')[1]; // 创建空对象存储参数 let obj = {}; // 再通过 & 将每一个参数单独分割出来 let paramsArr = urlStr.split('&'); for(let i = 0,len = paramsArr.length;i < len;i++){ // 再通过 = 将每一个参数分割为 key:value 的形式 let arr = paramsArr[i].split('='); obj[arr[0]] = arr[1]; } return obj; } console.log(getUrlParams(URL));
let url = 'https://www.baidu.com/s?ie=UTF-8&wd=%E8%AE%B8%E5%96%84%E7%A5%A5&p=1'; let urlStr = url.split('?')[1]; const params = new URLSearchParams(urlStr); console.log(params.get('k')); // 返回字符串“许善祥”,支持自动 UTF-8 解码 console.log(params.get('p')); // 返回字符串“1” console.log(params.get('xxx')); // 如果没有 xxx 这个键,则返回 null console.log(params.has('xxx')); // 当然也可以通过 has() 方法查询是否存在指定的键 console.log(params.keys()); // 返回一个 ES6 Iterator,内含 ['k', 'p'] console.log(params.values()); // 返一个 ES6 Iterator,内含 ['许善祥', '1'] console.log(params.entries()); // 与 Map.prototype.entries() 类似
const params = new URLSearchParams(); params.set('k', '许善祥'); // 设置参数 params.set('p', 1); // 支持 Boolean、Number 等丰富类型 console.log(params.toString()); // k=%E8%AE%B8%E5%96%84%E7%A5%A5&p=1
const { URLSearchParams } = require('url'); const urlSearchParams = new URLSearchParams();
正则匹配功能强大,不仅可以实现在登录注册时的账号、密码、邮箱、手机号等验证(看这里),还可以非常方便的处理一些字符串(校验、替换、提取等操作)。
let URL = 'http://www.baidu.com?name=祥&friend=宇'; function getUrlParams3(url){ // \w+ 表示匹配至少一个(数字、字母及下划线), // [\u4e00-\u9fa5]+ 表示匹配至少一个中文字符 let pattern = /(\w+|[\u4e00-\u9fa5]+)=(\w+|[\u4e00-\u9fa5]+)/ig; let result = {}; url.replace(pattern, ($, $1, $2)=>{ result[$1] = $2; }); return result; } console.log(getUrlParams3(URL)); // {name: '祥', friend: '宇'}
使用第三方库 qs 也可以实现 url 中参数字符的提取,还能实现将参数对象转为 url 参数形式,需要注意的是浏览器 cdn 方式引入时是默认添加到全局对象 window 的 Qs 属性上。
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.3/qs.min.js"></script> <script> let URL = 'http://www.baidu.com?name=祥&friend=宇'; function getUrlParams4(url) { // 引入 qs 库时会默认挂在到全局 window 的 Qs 属性上 // console.log(window); let urlStr = url.split('?')[1]; let result = Qs.parse(urlStr); // 拼接额外参数 let otherParams = { homepage: 'xushanxiang.com' }; let str = Qs.stringify(otherParams); let newUrl = url + str; return {result, newUrl}; } console.log(getUrlParams4(URL));
感谢各位的阅读,以上就是“怎么使用JavaScript获取URL参数”的内容了,经过本文的学习后,相信大家对怎么使用JavaScript获取URL参数这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。