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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
node内置调试方法总结
Feb 22 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
VUE实现密码验证与提示功能
Oct 18 Javascript
JS+DIV实现拖动效果
Feb 11 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 Javascript
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计算上一个月的今天
2013/05/23 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
php自定义hash函数实例
2015/05/05 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
js有关元素内容操作小结
2011/12/20 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
python函数返回多个值的示例方法
2013/12/04 Python
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
python使用opencv读取图片的实例
2017/08/17 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
python如何进行矩阵运算
2020/06/05 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
即兴演讲稿
2014/01/04 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
党支部三会一课计划
2014/09/24 职场文书
校长新学期致辞
2015/07/30 职场文书
2016年教师节感言
2015/12/09 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
导游词之千岛湖
2019/09/23 职场文书