在我们进入主题前,我先先看下获取网址URL的方法:

window.location.href // 设置或获取整个URL为字符串

window.location.hash // 设置或获取href属性中在井号#后面的部分参数

window.location.search // 设置或获取href属性中跟在问号?后面,井号#前面的部分参数

例如我们这里有一个url,例如:http://127.0.0.1:8080/html/urltojson.html?id=1&name=good#&price=1003

下面看下上面三个方法是如何使用的

console.log(window.location.href);
// http://127.0.0.1:8080/html/urltojson.html?id=1&name=good#&price=1003
console.log(window.location.hash);
// #&price=1003
console.log(window.location.search);
// ?id=1&name=good

我们看到了上面三个方法的返回参数是不一样的,我们接下来看下如果将url转换为json格式的数据。

第一种: for 循环方式

// 第一种: for循环
var GetQueryJson1 = function () {
let url = location.href; // 获取当前浏览器的URL
let arr = []; // 存储参数的数组
let res = {}; // 存储最终JSON结果对象
arr = url.split('?')[1].split('&'); // 获取浏览器地址栏中的参数 for (let i = 0; i < arr.length; i++) { // 遍历参数
if (arr[i].indexOf('=') != -1){ // 如果参数中有值
let str = arr[i].split('=');
res[str[0]] = str[1];
} else { // 如果参数中无值
res[arr[i]] = '';
}
}
return res;
}
console.log(GetQueryJson1());

第二种:正则表达式方式

// 第二种:正则表达式
var GetQueryJson2 = function () {
let url = location.href; // 获取当前浏览器的URL
let param = {}; // 存储最终JSON结果对象
url.replace(/([^?&]+)=([^?&]+)/g, function(s, v, k) {
param[v] = decodeURIComponent(k);//解析字符为中文
return k + '=' + v;
});
return param;
} console.log(GetQueryJson2());

以上所述是小端给大家介绍的JS将网址url转化为JSON格式的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言

将网址url中的参数转化为JSON格式的两种方法的更多相关文章

  1. 将网址url中的参数转化为JSON格式

    网上方法很多,各种奇技淫巧,这里贴上一种较为正常的思路. 主要利用split对获取的字符串不断进行分割,最后获得所需要的格式. 代码如下 <!DOCTYPE html> <html ...

  2. Android中使用Gson解析JSON数据的两种方法

    Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率;本文将介绍两种方法解析JSON数据,需要的朋友可以参考下   Json是一种类似于XML的通用数据交换格式,具有比XML更高的 ...

  3. Java学习笔记——可视化Swing中JTable控件绑定SQL数据源的两种方法

    在 MyEclipse 的可视化 Swing 中,有 JTable 控件. JTable 用来显示和编辑常规二维单元表. 那么,如何将 数据库SQL中的数据绑定至JTable中呢? 在这里,提供两种方 ...

  4. 怎么在CAD中测量图纸距离?来看看这两种方法

    在CAD中设计图纸最重要的就是图纸的尺寸,俗话说也就是图纸间的距离.通过正确的数据设计出的图纸才能够准确,也能够避免施工时事不必要的误差.那怎么在CAD中测量图纸距离呢?具体要怎么来进行操作呢?下面我 ...

  5. PyQt(Python+Qt)学习随笔:QTableWidget中表格各列平均分配宽度的两种方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 在QTableWidget表格部件中,如果需要实现表格中各列要占满部件中的可用空间,同时实现各列平分 ...

  6. 正则表达式提取url中的参数,返回json字符串

    var urlstr = "www.baidu.com?a=1&b=xx&c"; var s = urlstr.split("?"); var ...

  7. 利用Shell脚本将MySQL表中的数据转化为json格式

    脚本如下: #!/bin/bash mysql -s -phello test >.log <<EOF desc t1; EOF lines="concat_ws(',', ...

  8. HTML中调用带有SoapHeader头的WebService的两种方法

    第一种: function CallWebMethodWithHeader() { var soapXML = "<soap:Envelope xmlns:xsi='http://ww ...

  9. MySQL中删除数据的两种方法

    转自:http://blog.csdn.net/apache6/article/details/2778878 1. 在MySQL中有两种方法可以删除数据: 一种是delete语句,另一种是trunc ...

随机推荐

  1. ES6深入浅出-3 三个点运算 & 新版字符串-1.函数与对象的语法糖

    主要讲的内容 时间充裕的话就讲,模板字面量 默认参数值 首先讲es6之前,我们是怎么做的.例如我们要写一个求和的函数, 请两个参数的和,但是如果有的人就是穿一个参数呢? 那么b没有传值,b的值是多少呢 ...

  2. React错误收集

    1.  Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/ ...

  3. Game and Application Protocol

    This privacy policy details the information collected by the team ("we" or "our" ...

  4. PL-SQL Developer 配置使用Oracle客户端连接

    没有在本地安装Oracle 的用户必须下载一个instantclient(即使客户端), 路径指向这里,才能正常使用 下载 instantclient-basic-nt-11.2.0.3.0.zip ...

  5. JDK1.7 和JDK1.8同时存在设置默认的JDK

    最近学习SpringCloud需要安装JDK1.8 但是自己的项目在1.8的环境中运行不了 无论怎么修改使用cmd  中命令的java -version 都显示是jdk 1.8 将java home  ...

  6. 【Leetcode_easy】922. Sort Array By Parity II

    problem 922. Sort Array By Parity II solution1: class Solution { public: vector<int> sortArray ...

  7. 【GStreamer开发】GStreamer基础教程15——继承Clutter

    目标 Clutter是一个开源的库,用来创建快速.可移植和动态的GUI.GStreamer可以通过cluttersink这个element把clutter集成进来,允许视频像纹理一样使用.本教程会展示 ...

  8. 【GStreamer开发】GStreamer基础教程08——pipeline的快捷访问

    目标 GStreamer建立的pipeline不需要完全关闭.有多种方法可以让数据在任何时候送到pipeline中或者从pipeline中取出.本教程会展示: 如何把外部数据送到pipeline中 如 ...

  9. 小程序JS框架

  10. Django 之redis的应用

    redis概述 redis是一种nosql数据库,他的数据是保存在内存中,同时redis可以定时把内存数据同步到磁盘,即可以将数据持久化,并且他比memcached支持更多的数据结构(string,l ...