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 相关文章推荐
简单的js表单验证函数
Oct 28 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 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 静态变量与自定义常量的使用方法
2010/01/26 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python动态加载变量示例分享
2014/02/17 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
用python实现学生管理系统
2020/07/24 Python
python定时截屏实现
2020/11/02 Python
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
后勤人员岗位职责
2013/12/17 职场文书
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
网页美工求职信
2014/02/15 职场文书
踏青活动策划方案
2014/08/19 职场文书
节水倡议书
2015/01/19 职场文书
实习介绍信范文
2015/05/05 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书