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 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 Javascript
js实现带有动画的返回顶部
Aug 09 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来处理多个提交任务
2008/05/08 PHP
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
javascript String 对象
2008/04/25 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
理解Koa2中的async&await的用法
2018/02/05 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
Python运用于数据分析的简单教程
2015/03/27 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
python os模块在系统管理中的应用
2020/06/22 Python
python怎么判断素数
2020/07/01 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
基本款天堂:Everlane
2017/05/13 全球购物
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
建材业务员岗位职责
2013/12/08 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
广告学专业求职信
2014/06/19 职场文书
假释思想汇报范文
2014/10/11 职场文书
个人股份合作协议书
2014/10/24 职场文书
2014年宣传工作总结
2014/11/18 职场文书
工作一年自我鉴定
2019/06/20 职场文书
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript