面试题url查询参数解析

url查询参数解析

①手动解析

/* 
    多种情况考虑
        有问号有哈希 问号在前
        有问号有哈希 哈希在前
        有问号无哈希
        无问号有哈希
        无问号无哈希
*/
String.prototype.queryUrlParams =function(attr){
    let obj = {

    }
    let askIndex = this.indexOf('?'),
        wellIndex = this.indexOf('#'),
        askText,
        wellText
        askIndex == -1 ? askIndex = this.length : null
        wellIndex == -1 ? wellIndex = this.length : null
        if(askIndex < wellIndex){
            askText = this.substring(askIndex+1,wellIndex)
            wellText = this.substring(wellIndex)
        } else {
            askText = this.substring(askIndex+1)
            wellText = this.substring(wellIndex+1,askIndex)
        }
        if(wellText){
            obj['HASH'] = wellText.substring(1)
        }
        if(askText){
            askText.split('&').forEach(item=>{
                let arr = item.split('=')
                obj[arr[0]] = arr[1]
            })
        }
    return typeof attr == 'undefined' ? obj :(obj[attr]||null)
}

②利用a链接能获取到字符串的所有信息

String.prototype.queryUrlParams =function(attr){
    let obj = {

    }
    let reg1 = /([^?&=#]+)=([^?&=#]+)/g,
        reg2 = /#([^?&=#]+)/g
    this.replace(reg1,(_,key,value)=>{
        console.log(key,value)
        obj[key] = value
    })
    this.replace(reg2,(_,hash)=>{
        obj['HASH'] = hash
    })
    return typeof attr == 'undefined' ? obj :(obj[attr]||null)
}

③利用正则表达式

String.prototype.queryUrlParams =function(attr){
    let obj = {

    }
    let link =document.createElement('a')
    link.href = this
    let {hash,search} = link
        if(hash){
            obj['HASH'] = hash.substring(1)
        }
        if(search){
            search.substring(1).split('&').forEach(item=>{
                let arr = item.split('=')
                obj[arr[0]] = arr[1]
            })
        }
    return typeof attr == 'undefined' ? obj :(obj[attr]||null)
}