将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火车票网上订票官网"}
复制代码

 

posted @   古兰精  阅读(922)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示