URLSearchParams 接口定义处理 URL 参数串
基本使用方法如下
- /*
- * 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 参数串的更多相关文章
- URLSearchParams接口用来处理浏览器的url
URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串. URLSearchParams.append()插入一个指定的键/值对作为新的搜索参数. URLSearchPa ...
- URLSearchParams 接口
URLSearchParams 接口定义了很多个用来处理 URL 参数串的方法 他可以把对象转变成url上面查询信息的写法,例如a=1&b=2 可以把请求路由中的字符串 key=1 ,拼接 ...
- C语言定义从URL中获取键值的接口
环境:centos7下,对客户端http请求进行解析,来获取有效键值(包括汉字). 头文件 /* 这是一份关于从Http请求信息中提取键值的接口声明的头文件 */ #ifndef _HEAD_H_ # ...
- 定义一个方法get_page(url),url参数是需要获取网页内容的网址,返回网页的内容。提示(可以了解python的urllib模块)
定义一个方法get_page(url),url参数是需要获取网页内容的网址,返回网页的内容.提示(可以了解python的urllib模块) import urllib.request def get_ ...
- Thymeleaf 之 内置对象、定义变量、URL参数及标签自定义属性
Thymeleaf 之 内置对象.定义变量.URL参数及标签自定义属性 本文章来自[知识林] 如标题所述,这篇文章主要讲述Thymeleaf中的内置对象(list解析.日期格式化.数字格式化等).定义 ...
- 使用jquery获取url及url参数的方法及定义JQuery扩展方法
1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识. 2.jquery获取 ...
- [开发笔记]-使用jquery获取url及url参数的方法
使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javasc ...
- 使用jquery获取url及url参数的方法
使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javasc ...
- CDN页面刷新接口定义[高升]
一 . 任务 分发 工作流程步骤 1. 合作方按照高升定义的 json 数据格式向高升分发接口 post 任务,高升分发接口会根据接收情况即时反馈接收成功还是失败的结果.二 . 高升 分发 接口 定义 ...
随机推荐
- laravel 视图与传参
1:先建立好一个控制器HgjController,其中index方法 return view('hgj'); 2: 建立视图 在resources/views/hgj.blad.php <ht ...
- Openfire配置过程,以及与php交互注意事项。
Ben Werdmuller 是一位 Web 策划师和开发人员,他专注于开放源码平台.他是开源社交网络框架 Elgg 的共同创始人和技术带头人.Ben 的博客 http://benwerd.com/. ...
- am335x watchdog
am335x watchdog 内核文档kernel/Documentation/watchdog Qt@aplex:~/kernel/7109/linux-3.2.0/Documentation/w ...
- Ubuntu server版上使用命令行操作VPNclient
Ubuntu server版上使用命令行操作VPNclient VPN,虚拟专用网络,这个技术还是非常有用的.近期笔者參与的项目中就使用上了VPN,大概情况是这种.有两个开发团队,在异地,代码服务器在 ...
- linux源代码编译安装OpenCV
为了尽可能保证OpenCV的特性,使用OpenCV源代码编译安装在linux上.先从安装其依赖项開始,以ubuntu 14.04.X为例解说在Linux上源代码编译安装OpenCV,其它linux版本 ...
- R语言低级绘图函数-symbols
严格意义上将symbols 并不能算是一个低级的绘图函数,因为它不仅可以在一幅已经存在的图标上添加元素,还可以创建一张新的图表 鉴于它绘图时的灵活性,我把它归入到低级绘图函数中 symbols 可以创 ...
- 查看CentOS系统配置情况命令
系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # ho ...
- 基于bootstrap的Dialog
function yms_Dialog(container_id, modal_path, handle_function) { /// <summary> /// ...
- informatica 中的workflow连接mysql数据配置DSN
先要下载mysqlodbc 一步步安装之后 ,再从管理工具里面找到ODBC,最后选择系统DSN,添加mysql驱动之后,进入添加编辑: 在workflow里面的配置连接字符串就写刚刚配置的连接名称 比 ...
- 如何查看linux命令源代码
如何查看linux命令源代码 用linux一段时间了,有时候想看看ls.cat.more等命令的源代码,在下载的内核源码中用cscope没能找到,在网上搜索了一下,将方 法总结如下: 以搜索ls命令源 ...