美文网首页
JS获取当前浏览器URL参数(中英文通用)

JS获取当前浏览器URL参数(中英文通用)

作者: dingFY | 来源:发表于2020-10-09 08:43 被阅读0次

    一、获取浏览器参数方法

    function getParams(key) {
        let search = window.location.search.replace(/^\?/, "");
        let pairs = search.split("&");
        let paramsMap = pairs.map(pair => {
            let [key, value] = pair.split("=");
            return [decodeURIComponent(key), decodeURIComponent(value)];
        }).reduce((res, [key, value]) => Object.assign(res, { [key]: value }), {});
        return paramsMap[key] || "";
    }
    

    说明:

    1、window.location.search:是获取URL地址的查询部分 eg: " ?name=dingFY&age=18 "

    2、window.location.search.replace(/^?/, ""):去掉查询部分的 " ? "

    3、search.split("&"): 将查询部分字符串以&为分界切割成数组

    4、遍历数组,将数组的每一项以=为分界进行切割保存为键值对,对键和值进行URL解码,再合成为对象

    5、从对象中返回用户指定key键的value值

    二、decodeURIComponent()函数

    decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

    语法:decodeURIComponent(URIstring)

    参数:URIstring:必需,一个字符串,含有编码 URI 组件或其他要解码的文本。

    返回值:URIstring 的副本,其中的十六进制转义序列将被它们表示的字符替换。

    举例:

    let tast="http://www.baidu.com/My first/"
    
    document.write(encodeURIComponent(test)+ "<br />")
    document.write(decodeURIComponent(test))
    
    // 页面输出:
    // http%3A%2F%2Fwww.baidu.com%2FMy%20first%2F
    // http://www.baidu.com/My first/
    

    三、举例

    假设当前页面的URL为:

    http://localhost:8088/todayMeetingMessage.html?organizeCode=44030022&organizeName=%22%E9%BB%84%E5%9F%94%E7%9C%8B%E5%AE%88%E6%89%80%22#/dispatch

    调用getParams()方法获取organizeCode的参数值

    function getParams(organizeCode) {
        let search = window.location.search.replace(/^\?/, ""); 
        // organizeCode=44030022&organizeName=%22%E9%BB%84%E5%9F%94%E7%9C%8B%E5%AE%88%E6%89%80%22
    
        let pairs = search.split("&"); 
        // ["organizeCode=44030022", "organizeName=%22%E9%BB%84%E5%9F%94%E7%9C%8B%E5%AE%88%E6%89%80%22"]
    
        let paramsMap = pairs.map(pair => {
            let [key, value] = pair.split("=");
            return [decodeURIComponent(key), decodeURIComponent(value)];
        }).reduce((res, [key, value]) => Object.assign(res, { [key]: value }), {});
        // {organizeCode: "44030022", organizeName: ""黄埔看守所""}
    
        return paramsMap[organizeCode] || ""; 
        // 44030022
    }
    

    文章每周持续更新,可以微信搜索「 前端大集锦 」第一时间阅读,回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料

    相关文章

      网友评论

          本文标题:JS获取当前浏览器URL参数(中英文通用)

          本文链接:https://www.haomeiwen.com/subject/dadrnhtx.html