文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript怎么获取URL参数

2023-06-29 22:30

关注

今天小编给大家分享一下JavaScript怎么获取URL参数的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

一、字符串 split 方法

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));

JavaScript怎么获取URL参数

二、使用 URLSearchParams 方法

1、解析搜索字符串

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 这个键,则返回 nullconsole.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() 类似

2、生成搜索字符串

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

3、Node.js 代码

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

使用第三方库 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参数”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯