javascript將url解析為json格式的兩種方法
更新時間：2017年08月18日 15:59:56 作者：雪萌萌萌
本篇文章主要介紹了javascript將url解析為json格式的兩種方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文介紹了javascript將url解析為json格式的兩種方法，分享給大家，具體如下：
方法一：最簡單的方法，利用a標(biāo)簽來實現(xiàn)
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)
得到的結(jié)果
方法二：通過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'));
返回的結(jié)果
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' }
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
淺談webpack打包生成的bundle.js文件過大的問題
下面小編就為大家分享一篇淺談webpack打包生成的bundle.js文件過大的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
使用純JS實現(xiàn)checkbox的框選效果(鼠標(biāo)拖拽多選)
最近做了一個用js實現(xiàn)鼠標(biāo)拖拽多選的功能,于是整理了一下思路,寫了一個小demo,下面這篇文章主要給大家介紹了關(guān)于如何使用純JS實現(xiàn)checkbox的框選效果(鼠標(biāo)拖拽多選)的相關(guān)資料,需要的朋友可以參考下2022-05-05
圖片自定義滾動條3.0（Duma“自動渲染版”，也許世間萬物都會變，但是真摯的愛，卻永遠(yuǎn)留存在心中?。?/div> 2009-07-07
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)列表切換效果的相關(guān)資料,需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細(xì)介紹了js canvas實現(xiàn)二維碼和圖片合成的海報，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了BootStrap注意事項小結(jié)（五）表單的相關(guān)資料，非常不錯，具有參考借鑒價值，,需要的朋友可以參考下2017-03-03
大家應(yīng)該都知道,Swiper是純javascript打造的滑動特效插件,面向手機(jī)、平板電腦等移動終端,下面這篇文章主要給大家介紹了關(guān)于Swiper如何實現(xiàn)兩行四列輪播圖效果的相關(guān)資料,需要的朋友可以參考下2022-10-10
js+HTML5實現(xiàn)canvas多種顏色漸變效果的方法
這篇文章主要介紹了js+HTML5實現(xiàn)canvas多種顏色漸變效果的方法,涉及html5屬性的相關(guān)技巧,需要的朋友可以參考下2015-06-06
關(guān)于同時使用swiper和echarts遇到的問題及解決方法
這篇文章主要介紹了關(guān)于同時使用swiper和echarts遇到的問題及解決方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章主要詳細(xì)介紹了JS合并兩個數(shù)組的方法，文中有詳細(xì)的代碼示例，對我們學(xué)習(xí)JS有一定的幫助，感興趣的同學(xué)可以參考一下2023-06-06最新評論