• 技术文章 >web前端 >js教程

    javascript将url解析为json格式的两种方法

    韦小宝韦小宝2018-01-19 10:35:56原创1111
    本篇文章主要介绍了javascript将url解析为json格式的两种方法,具有一定的参考和学习JavaScript的价值,对JavaScript感兴趣的小伙伴们可以参考一下本篇文章

    本文介绍了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)

    得到的结果:

    方法二:通过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' }

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持PHP中文网。

    相关推荐:

    javascript 产生随机数的几种方法总结

    JavaScript屏蔽Backspace键的实现代码

    JavaScript实现抽奖系统实例分享

    以上就是javascript将url解析为json格式的两种方法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript json js
    上一篇:PHP获取链表中倒数第K个节点的方法实例分享 下一篇:JS模拟超市简易收银台小程序代码解析
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• 什么是变更检测?聊聊angular的变更机制• 深入了解angular中的@Component装饰器• JavaScript面向对象详细解析之属性描述符• 什么是状态?深入学习angular中的动画• 浅析node中path路径模块的一些API
    1/1

    PHP中文网