js怎么完全解析url和拼接

這篇文章主要介紹“js怎么完全解析url和拼接”，在日常操作中，相信很多人在js怎么完全解析url和拼接問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”js怎么完全解析url和拼接”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

我們經(jīng)常會遇到需要自己解析url地址，或者是自己拼接url，因此我們需要一個專門對url處理的js

1、理解url

url由6部分組成

例如:
https://blog.csdn.net/weixin_43236062/article/details/109065450?id=1&name=huangnan

• 協(xié)議：

• 常見的協(xié)議有兩種，一種是http 一種是https 后面接://

• 域名/ip：

• blog.csdn.net / 192.169.1.0 DNS服務(wù)器把域名解析成ip

• 端口

• 范圍0-65535 http默認(rèn)80 https默認(rèn)443

• hash

• hash 在url最后以#開頭的一段路徑

• 還有一種是history，history就是‘’，例子就是history

• 路徑

• /weixin_43236062/article/details/109065450 也相當(dāng)于文件的名稱

• 參數(shù)

• ?id=1&name=huangnan. 在?后面加上，由&切割，&前是鍵值，&后是值

綜合起來就可以得出

協(xié)議://域名(ip):端口/hash/路徑?參數(shù)

url也可以簡寫，正常來說除了路徑，其他都可以不寫，相當(dāng)于相對路徑。

我們了解url以后，就可以開始解析或者拼接url了

2、解析url

2.1、全量解析

全量解析，我們可以借助a標(biāo)簽。
a標(biāo)簽通過打印，我們會發(fā)現(xiàn)一些比較關(guān)鍵的用法：
origin、hash、pathname這些都是我們常用的屬性

const parse = (path) => {
    let data = {
        path:'',
        query:{},
        origin:'',
        hash:''
    }
    var tag = window.document.createElement('a')
    tag.href = path

    data.origin = tag.origin
    data.hash = tag.hash
    data.path = tag.pathname

    let pathList = tag.search.split('?')
    //獲取query
    if(pathList[1]){
        let queryList = pathList[1].split('&')
        queryList.map((item)=> {
            let queryData = item.split('=')
            data.query[queryData[0]] = queryData[1]
        })
    }

    return data
}

2.2、只取參數(shù)

const parseQuery = (path) => {
    let query = {},
    let queryList = path.split('?')
    //獲取query
    if(queryList[1]){
        let queryDataList = queryList[1].split('&')
        queryDataList.map((item)=> {
            let queryData = item.split('=')
            data.query[queryData[0]] = queryData[1]
        })
        return query
    }else{
    	return false
	}
}

3、合并url

const build = (path, query = {}) => {
    if (!_isObject(query)) {
        console.error('請傳入正確的query')
        return
    }
    let str = ''
    Object.keys(query).forEach(key => {
        str += `&${key}=${encodeURIComponent(query[key])}`
    })
    return `${path}?${str.slice(1)}`
}

到此，關(guān)于“js怎么完全解析url和拼接”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>