基本使用方法如下

/*
* URLSearchParams属性
* @语法:new URLSearchParams(parameter);
*/
(function(){
var str = "http://www.domain.com/?user=Alan&id=123&id=456";
var searchParams = new URLSearchParams(str);
// let...of 语法(迭代对象)
for(let p of searchParams){
// console.log(p);
}
/*
* URLSearchParams.append()
* @添加新的key/value到URL中
*/
searchParams.append("city", encodeURIComponent("深圳")); /*
* URLSearchParams.has()
* @查询是否存在,返回一个boolean值
*/
searchParams.has("id"); // true
/*
* URLSearchParams.get()
* @返回相关联的第一个值
*/
searchParams.get("id"); // /*
* URLSearchParams.getAll()
* @返回所有相同key的值
*/
searchParams.getAll("id"); // ["123", "456"] /*
* URLSearchParams.set()
* @设置key的value值,如果有多个,删除其他的
*/
searchParams.set("id", "789"); /*
* searchParams.delete()
* @删除所有参数列表key与value值,重复的key都被删除
*/
searchParams.delete("id"); /*
* searchParams.entries()
* @返回所有键值对key/value
*/
for(let pair of searchParams.entries()){
console.log(pair[0]+ ', '+ pair[1]);
} /*
* searchParams.keys()
* @返回所有键key
*/
for(let key of searchParams.keys()){
console.log(key);
} /*
* searchParams.values()
* @返回所有值
*/
for(let value of searchParams.values()) {
console.log(value);
} /*
* searchParams.toString()
* @返回修改过的URL
*/
searchParams.toString();
console.log(searchParams.toString());
}());

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

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

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

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

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

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

function parse(str){
if(typeof str !== "string"){
return;
}
var paramObj = {};
var decode = decodeURIComponent(str); // 先解码
var parsePart = decode.split("?#")[decode.split("?#").length-1]; // 截断不需要部分
var paramArr = parsePart.split("&");
for(var i = 0; i < paramArr.length; i++){
var tmp = paramArr[i].split("=");
var key = tmp[0];
var value = tmp[1] || true; // console.log("关键字是:" + key, "值是:" + value);
if(typeof paramObj[key] === "undefined"){
paramObj[key] = value;
}else{
var newValue = paramObj[key] + "," + value; // 有多个重复的先连接字符串,然后才分割开
paramObj[key] = newValue.split(",");
}
}
// console.log(paramObj);
}

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. Android APP 分享图片文字到微信刚開始正常,后面就不弹出分享框了

    依照官方的流程走了一遍.一切顺利,分享成功了.本来以为能够大功告成了,结果睡了一觉,第二天要给客户演示了.才发现TMD坑爹了,不能分享了,第三方的分享栏弹不出来了.我一阵惊慌,还好非常快找到了解决的方 ...

  2. 从实例中学习grid布局

    对于Web开发者来说,网页布局一直是个比较重要的问题. Web 布局主要经历了以下四个阶段: 1.table表格布局: 2.float浮动及position定位布局: 3.flex弹性盒模型布局,革命 ...

  3. Spark SQL怎么创建编程创建DataFrame

    创建DataFrame在Spark SQL中,开发者可以非常便捷地将各种内.外部的单机.分布式数据转换为DataFrame.以下Python示例代码充分体现了Spark SQL 1.3.0中DataF ...

  4. 安装 Windows SDK for Windows 7 时遇到的一个问题及解决办法

    最近试着用 VS2010 + Qt 开发程序,发现 VS2010 里面没有提供单独的调试器 cdb,这样用 Qt Creator 时就无法设置断点调试,很不方便.想起 Windows SDK for  ...

  5. [从jQuery看JavaScript]-变量与作用域链

    jQuery片段: var // Will speed up references to window, and allows munging its name. window = this, //  ...

  6. Android ListView 笔记

    ListView以列表的形式展示数据内容. 布局文件如下所示,添加一个ListView. activity_main.xml <?xml version="1.0" enco ...

  7. Java JNI初探

    ---说明,之前直接百度出来的例子,照猫画虎.没想到的是这例子居然直接来自百度百科,写着写着就囧了.. ---anyway,写完了就当是给自己看吧. 同事求助,就看了一下,照猫画虎一番,略有所得. J ...

  8. 第三百一十节,Django框架,模板语言

    第三百一十节,Django框架,模板语言 模板语言就是可以将动态数据在html模板渲染的语言 一.接收值渲染 locals()函数,写在请求响应render()函数里,可以将逻辑处理函数里的变量传到h ...

  9. 网络协议之ftp---ftp 协议详解

    http://blog.csdn.net/yxyhack/article/details/1826256 http://blog.chinaunix.net/uid-7777486-id-204393 ...

  10. dirname(__FILE__) 介绍

    简单地说:      __FILE__     返回当前 路径+文件名      dirname(__FILE__) 返回当前文件路径的 路径部分 (后面没有“\”号)      dirname(di ...