JavaScript解析URL为JSON的两种实现方式

作者:服务小站时间:2026-10-22 07:28:48浏览:95

本文介绍在JavaScript中将URL字符串解析为JSON对象的两种常用方法。第一种利用浏览器原生a标签属性,适合前端环境;第二种基于Node.js的url模块,适用于服务端或Node环境。文章提供了具体代码示例及解析结果说明,帮助开发者根据运行环境选择合适的解析方案。

JavaScript解析URL为JSON的两种实现方式

本文介绍在JavaScript中将URL字符串解析为JSON对象的两种常用方法,供开发者参考。

利用a标签特性实现

第一种方法:利用HTML 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的两种实现方式

使用Node.js内置的url模块

第二种方法:使用Node.js内置的url模块

解析URL可借助Node.js提供的url模块,其用法直观。通过parse()函数可将URL字符串转换为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' }

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

作者最新文章