• 将url的查询参数解析成字典对象


      这个题目不约而同的出现在了多家公司的面试题中,当然也是因为太过于典型,解决方案无非就是拆字符或者用正则匹配来解决,我个人强烈建议用正则匹配,因为url允许用户随意输入,如果用拆字符的方式,有任何一处没有考虑到容错,就会导致整个js都报错。而正则就没有这个问题,他只匹配出正确的配对,非法的全部过滤掉,简单,方便。

      实现代码:

    1、手动解析

    function getQueryStringArgs(url){
        url = url == null ? window.location.href : url;
        var qs = url.substring(url.lastIndexOf("?") + 1);
        var args = {};
        var items = qs.length > 0 ? qs.split('&') : [];
        var item = null;
        var name = null;
        var value = null;
        for(var i=0; i<items.length; i++){
            item = items[i].split("=");
            //用decodeURIComponent()分别解码name 和value(因为查询字符串应该是被编码过的)。
            name = decodeURIComponent(item[0]);
            value = decodeURIComponent(item[1]);
    
            if(name.length){
                args[name] = value;
            }
        }
        return args;
    }
    console.log(getQueryStringArgs('https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd=12306%E7%81%AB%E8%BD%A6%E7%A5%A8%E7%BD%91%E4%B8%8A%E8%AE%A2%E7%A5%A8%E5%AE%98%E7%BD%91'));
    // Object {tn: "monline_3_dg", ie: "utf-8", wd: "12306火车票网上订票官网"}

    2、使用正则

    function getQueryObject(url) {
        url = url == null ? window.location.href : url;
        var search = url.substring(url.lastIndexOf("?") + 1);
        var obj = {};
        var reg = /([^?&=]+)=([^?&=]*)/g;
        // [^?&=]+表示:除了?、&、=之外的一到多个字符
        // [^?&=]*表示:除了?、&、=之外的0到多个字符(任意多个)
        search.replace(reg, function (rs, $1, $2) {
            var name = decodeURIComponent($1);
            var val = decodeURIComponent($2);
            val = String(val);
            obj[name] = val;
            return rs;
        });
        return obj;
    }
    console.log(getQueryObject('https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd=12306%E7%81%AB%E8%BD%A6%E7%A5%A8%E7%BD%91%E4%B8%8A%E8%AE%A2%E7%A5%A8%E5%AE%98%E7%BD%91'));
    // Object {tn: "monline_3_dg", ie: "utf-8", wd: "12306火车票网上订票官网"}
  • 相关阅读:
    ios js交互
    再次记录 cocoapods
    CABasicAnimation
    mysql授权
    很简单的代码,但是无法解释的错误
    4款开源免费的数据可视化JavaScript库
    【工具】获取窗口与控件信息
    从网易搬家来的49篇日志
    Git Extensions system.invalidoperationexception尚未提供文件名,因此无法启动进程
    哆啦A梦欺骗了你!浏览器CSS3测试遭质疑
  • 原文地址:https://www.cnblogs.com/goloving/p/9292165.html
Copyright © 2020-2023  润新知