基本使用方法如下

  1. /*
  2. * URLSearchParams属性
  3. * @语法:new URLSearchParams(parameter);
  4. */
  5. (function(){
  6. var str = "http://www.domain.com/?user=Alan&id=123&id=456";
  7. var searchParams = new URLSearchParams(str);
  8. // let...of 语法(迭代对象)
  9. for(let p of searchParams){
  10. // console.log(p);
  11. }
  12. /*
  13. * URLSearchParams.append()
  14. * @添加新的key/value到URL中
  15. */
  16. searchParams.append("city", encodeURIComponent("深圳"));
  17.  
  18. /*
  19. * URLSearchParams.has()
  20. * @查询是否存在,返回一个boolean值
  21. */
  22. searchParams.has("id"); // true
  23. /*
  24. * URLSearchParams.get()
  25. * @返回相关联的第一个值
  26. */
  27. searchParams.get("id"); //
  28.  
  29. /*
  30. * URLSearchParams.getAll()
  31. * @返回所有相同key的值
  32. */
  33. searchParams.getAll("id"); // ["123", "456"]
  34.  
  35. /*
  36. * URLSearchParams.set()
  37. * @设置key的value值,如果有多个,删除其他的
  38. */
  39. searchParams.set("id", "789");
  40.  
  41. /*
  42. * searchParams.delete()
  43. * @删除所有参数列表key与value值,重复的key都被删除
  44. */
  45. searchParams.delete("id");
  46.  
  47. /*
  48. * searchParams.entries()
  49. * @返回所有键值对key/value
  50. */
  51. for(let pair of searchParams.entries()){
  52. console.log(pair[0]+ ', '+ pair[1]);
  53. }
  54.  
  55. /*
  56. * searchParams.keys()
  57. * @返回所有键key
  58. */
  59. for(let key of searchParams.keys()){
  60. console.log(key);
  61. }
  62.  
  63. /*
  64. * searchParams.values()
  65. * @返回所有值
  66. */
  67. for(let value of searchParams.values()) {
  68. console.log(value);
  69. }
  70.  
  71. /*
  72. * searchParams.toString()
  73. * @返回修改过的URL
  74. */
  75. searchParams.toString();
  76. console.log(searchParams.toString());
  77. }());

JS 编写函数从下面的 URL 串中解析出所有的参数

  1. http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&d&enabled

期望的返回结果格式如下:

  1. {
  2. user: 'anonymous',
  3. id: [123, 456], // 重复出现的 key 要组装成数组,能被转成数字的就转成数字类型
  4. city: '北京', // 中文
  5. enabled: true, // 未指定值的 key 约定值为 true
  6. }

谋定而后动,动手前一定要搞清楚问题。怎样才算是把问题搞清楚了?要清楚输入的特征,是否会出现各种奇怪的输入

防御性编程,检测是否为字符串

  1. function parse(str){
  2. if(typeof str !== "string"){
  3. return;
  4. }
  5. var paramObj = {};
  6. var decode = decodeURIComponent(str); // 先解码
  7. var parsePart = decode.split("?#")[decode.split("?#").length-1]; // 截断不需要部分
  8. var paramArr = parsePart.split("&");
  9. for(var i = 0; i < paramArr.length; i++){
  10. var tmp = paramArr[i].split("=");
  11. var key = tmp[0];
  12. var value = tmp[1] || true;
  13.  
  14. // console.log("关键字是:" + key, "值是:" + value);
  15. if(typeof paramObj[key] === "undefined"){
  16. paramObj[key] = value;
  17. }else{
  18. var newValue = paramObj[key] + "," + value; // 有多个重复的先连接字符串,然后才分割开
  19. paramObj[key] = newValue.split(",");
  20. }
  21. }
  22. // console.log(paramObj);
  23. }

URLSearchParams 接口定义处理 URL 参数串的更多相关文章

  1. URLSearchParams接口用来处理浏览器的url

    URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串. URLSearchParams.append()插入一个指定的键/值对作为新的搜索参数. URLSearchPa ...

  2. URLSearchParams 接口

    URLSearchParams 接口定义了很多个用来处理 URL 参数串的方法 他可以把对象转变成url上面查询信息的写法,例如a=1&b=2 可以把请求路由中的字符串   key=1 ,拼接 ...

  3. C语言定义从URL中获取键值的接口

    环境:centos7下,对客户端http请求进行解析,来获取有效键值(包括汉字). 头文件 /* 这是一份关于从Http请求信息中提取键值的接口声明的头文件 */ #ifndef _HEAD_H_ # ...

  4. 定义一个方法get_page(url),url参数是需要获取网页内容的网址,返回网页的内容。提示(可以了解python的urllib模块)

    定义一个方法get_page(url),url参数是需要获取网页内容的网址,返回网页的内容.提示(可以了解python的urllib模块) import urllib.request def get_ ...

  5. Thymeleaf 之 内置对象、定义变量、URL参数及标签自定义属性

    Thymeleaf 之 内置对象.定义变量.URL参数及标签自定义属性 本文章来自[知识林] 如标题所述,这篇文章主要讲述Thymeleaf中的内置对象(list解析.日期格式化.数字格式化等).定义 ...

  6. 使用jquery获取url及url参数的方法及定义JQuery扩展方法

    1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识. 2.jquery获取 ...

  7. [开发笔记]-使用jquery获取url及url参数的方法

    使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javasc ...

  8. 使用jquery获取url及url参数的方法

    使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javasc ...

  9. CDN页面刷新接口定义[高升]

    一 . 任务 分发 工作流程步骤 1. 合作方按照高升定义的 json 数据格式向高升分发接口 post 任务,高升分发接口会根据接收情况即时反馈接收成功还是失败的结果.二 . 高升 分发 接口 定义 ...

随机推荐

  1. laravel 视图与传参

    1:先建立好一个控制器HgjController,其中index方法 return  view('hgj'); 2: 建立视图 在resources/views/hgj.blad.php <ht ...

  2. Openfire配置过程,以及与php交互注意事项。

    Ben Werdmuller 是一位 Web 策划师和开发人员,他专注于开放源码平台.他是开源社交网络框架 Elgg 的共同创始人和技术带头人.Ben 的博客 http://benwerd.com/. ...

  3. am335x watchdog

    am335x watchdog 内核文档kernel/Documentation/watchdog Qt@aplex:~/kernel/7109/linux-3.2.0/Documentation/w ...

  4. Ubuntu server版上使用命令行操作VPNclient

    Ubuntu server版上使用命令行操作VPNclient VPN,虚拟专用网络,这个技术还是非常有用的.近期笔者參与的项目中就使用上了VPN,大概情况是这种.有两个开发团队,在异地,代码服务器在 ...

  5. linux源代码编译安装OpenCV

    为了尽可能保证OpenCV的特性,使用OpenCV源代码编译安装在linux上.先从安装其依赖项開始,以ubuntu 14.04.X为例解说在Linux上源代码编译安装OpenCV,其它linux版本 ...

  6. R语言低级绘图函数-symbols

    严格意义上将symbols 并不能算是一个低级的绘图函数,因为它不仅可以在一幅已经存在的图标上添加元素,还可以创建一张新的图表 鉴于它绘图时的灵活性,我把它归入到低级绘图函数中 symbols 可以创 ...

  7. 查看CentOS系统配置情况命令

    系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # ho ...

  8. 基于bootstrap的Dialog

    function yms_Dialog(container_id, modal_path, handle_function) {     /// <summary>    ///      ...

  9. informatica 中的workflow连接mysql数据配置DSN

    先要下载mysqlodbc 一步步安装之后 ,再从管理工具里面找到ODBC,最后选择系统DSN,添加mysql驱动之后,进入添加编辑: 在workflow里面的配置连接字符串就写刚刚配置的连接名称 比 ...

  10. 如何查看linux命令源代码

    如何查看linux命令源代码 用linux一段时间了,有时候想看看ls.cat.more等命令的源代码,在下载的内核源码中用cscope没能找到,在网上搜索了一下,将方 法总结如下: 以搜索ls命令源 ...