基本使用方法如下

/*
* 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. lua中table如何安全移除元素

    在Lua中,table如何安全的移除元素这点挺重要,因为如果不小心,会没有正确的移除,造成内存泄漏. 引子 比如有些朋友常常这么做,大家看有啥问题 将test表中的偶数移除掉local test = ...

  2. mac os x10.9.2 查看进程对应端口

    以前在Ubuntu上,直接sudo netstat -nap 但是在mac 上这个命令还跑不通,sudo netstat  -nap  tcp 才行,结果还没有进程号.用lsof -Pn 解决了

  3. Spring 中三种Bean配置方式比较

    今天被问到Spring中Bean的配置方式,很尴尬,只想到了基于XML的配置方式,其他的一时想不起来了,看来Spring的内容还没有完全梳理清楚,见到一篇不错的文章,就先转过来了. 以前Java框架基 ...

  4. 使用 jQuery UI 和 jQuery 插件构建更好的 Web 应用程序

    简介: 对于那些使用 JavaScript 和 jQuery 库从桌面应用程序转向 Web 应用程序的开发人员来说,他们还不习惯去考虑应用程序基本的外观,因为这些以前都是由操作系统来处理的.了解 jQ ...

  5. 【转】nginx中proxy_set_header Host $host的作用

    nginx为了实现反向代理的需求而增加了一个ngx_http_proxy_module模块.其中proxy_set_header指令就是该模块需要读取的配置文件.在这里,所有设置的值的含义和http请 ...

  6. 《FPGA全程进阶---实战演练》第四章之Quartus II使用技巧

    技巧1:“新”技能 hierarchies警告寻找 在编译之后,警告中“hierarchies”这个单词大家估计都很熟悉了,一看到这个警告,基本上就是例化时出现的问题.一般例化时,要是哪个连线没引出, ...

  7. am335x 10.1"电容touch 不能识别

    /**************************************************************** * am335x 10.1"电容touch 不能识别 * ...

  8. C++ 继承、函数重载

    题外话1:浪费了两天,可耻! 题外话2:你这个年纪,做得好是理所当然,做不好是罪孽深重!!! --- 深以为然. 题外话3:从开始看C++ Primer 到现在,整整24天了,没想到基础方面耗费这么久 ...

  9. windows 批处理文件中引用日期

    参见:http://blog.csdn.net/iw1210/article/details/39313677 %DATE%输出的是: yyyy/mm/dd 星期* (例如:2008/12/18 星期 ...

  10. window设置TortoiseGit连接git不用每次输入用户名和密码

    1. 在Windows中添加一个HOME环境变量,值为%USERPROFILE%,如下图: 2. 在“开始>运行(快捷键:win+r)”中打开%Home%,然后在目录下新建一个名为“_netrc ...