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 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
深入理解vue Render函数
Jul 19 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
微信小程序自定义toast的实现代码
Nov 16 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
React中this丢失的四种解决方法
Mar 12 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
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
layui多图上传实现删除功能的例子
2019/09/23 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
Python内置函数的用法实例教程
2014/09/08 Python
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
python和php学习哪个更有发展
2020/06/17 Python
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
行政办公员自我评价分享
2013/12/14 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
中学生打架检讨书
2014/10/13 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
病人慰问信范文
2015/02/15 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL