前端大杂烩

重写URL返回query对象信息

2024-01-18  本文已影响0人  写写而已

在使用URL转换链接的时候,query无法很直观的体现,且想要根据key获取值的时候不方便,
如果导入jsuri等工具解析又太复杂,使用起来也麻烦
所以考虑使用js的原始属性new URL在保留URL的用法的同时,改动最小的情况下,增加一个对象形式的query

  1. 纠正与兼容用户拼接了多个?的情况
  2. 无传入数据时,使用当前的location.href解析

如下图:

search内的?q=books?name=简书&id=10087都能顺利解析

image.png
const _URL = URL
window.URL = function (url, base) {
    url = url || location.href
    let u = new _URL(url, base)
    if (u) {
        function get() {
            let s = u.search
            let arr = {}
            if (s) {
                s = s.substring(1).replace(/\?/g, '&').split('&')
                s.forEach(item => {
                    let t = item.split('=')
                    arr[t[0]] = decodeURIComponent(t[1] || '')
                })
            }

            return arr
        }
        u.query = get()
    }
    return u
}
let url = new URL('https://user:pass@www.test.com:81/index.html?q=books?name=简书&id=10087#fragment')
console.log(url)
console.log(url.query.name)
上一篇下一篇

猜你喜欢

热点阅读