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 相关文章推荐
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
使用javascript插入样式
Mar 14 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
javascript实现拼图游戏
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中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
十大使用PHP框架的理由
2015/09/26 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
基于node实现websocket协议
2016/04/25 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
python读取csv文件示例(python操作csv)
2014/03/11 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
python类共享变量操作
2020/09/03 Python
python爬虫搭配起Bilibili唧唧的流程分析
2020/12/01 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
2015年大学生实习评语
2015/03/25 职场文书
教师反邪教心得体会
2016/01/15 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js