javascript将url解析为json格式的两种方法


Posted in Javascript onAugust 18, 2017

本文介绍了javascript将url解析为json格式的两种方法,分享给大家,具体如下:

方法一:最简单的方法,利用a标签来实现

function parseUrl(url){
  var a=document.createElement('a');
  a.href=url;
  return {
   protocol:a.protocol.replace(':',''),
   hostname:a.hostname,
   port:a.port,
   path:a.pathname,
   query:(()=>{
    var query=a.search.substr(1);
    var queryArr=query.split('&');
    var queryObj={};
    queryArr.forEach((item,index)=>{
      var item=item.split('=');
      var key=item[0];
      queryObj[key]=item[1];
    })
    return queryObj;
   })(),
    params:(()=>{
    var params=a.hash.substr(1);
    var paramsArr=params.split('#');
    return paramsArr;
    
   })(),

  }
}
var urlObj = parseUrl('http://www.baidu.com:90/search?name=liyajie&age=12#abc#bbb')
console.log(urlObj)

得到的结果

javascript将url解析为json格式的两种方法

方法二:通过nodejs的url模块

解析URL需要用到Node.js提供的url模块,它使用起来非常简单,通过parse()将一个字符串解析为一个Url对象:

'use strict';
   var url = require('url');
   console.log(url.parse('http://user:pass@host.com:8080/path/to/file?query=string#hash'));

返回的结果

Url {
 protocol: 'http:',
 slashes: true,
 auth: 'user:pass',
 host: 'host.com:8080',
 port: '8080',
 hostname: 'host.com',
 hash: '#hash',
 search: '?query=string',
 query: 'query=string',
 pathname: '/path/to/file',
 path: '/path/to/file?query=string',
 href: 'http://user:pass@host.com:8080/path/to/file?query=string#hash' }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
Vue组件选项props实例详解
Aug 18 #Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 #Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 #Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 #Javascript
Vue中引入样式文件的方法
Aug 18 #Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 #jQuery
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 #Javascript
You might like
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
Python命令行解析模块详解
2018/02/01 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
python 命名规范知识点汇总
2020/02/14 Python
python unichr函数知识点总结
2020/12/16 Python
详解Python中的文件操作
2021/01/14 Python
JAVA和C++区别都有哪些
2015/03/30 面试题
《陈毅探母》教学反思
2014/05/01 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
文明班级申报材料
2014/12/24 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
检讨书范文
2015/01/27 职场文书
房贷工资证明范本
2015/06/12 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python