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 相关文章推荐
javascript 时间比较实现代码
Oct 28 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
vue使用自定义指令实现拖拽
Jan 29 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&&mysql)五
2006/10/09 PHP
PHP令牌 Token改进版
2008/07/18 PHP
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
py中的目录与文件判别代码
2008/07/16 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
python脚本替换指定行实现步骤
2017/07/11 Python
python实现抖音视频批量下载
2018/06/20 Python
Pytorch的mean和std调查实例
2020/01/02 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
shell程序中如何注释
2012/01/28 面试题
安全教育实施方案
2014/03/02 职场文书
普通话演讲稿
2014/09/03 职场文书
综治工作汇报材料
2014/10/27 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书