javascript url参数重构

最新推荐文章于 2023-01-06 12:13:51 发布

iceberg_Yao

最新推荐文章于 2023-01-06 12:13:51 发布

阅读量673

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： javascript url 前端开发

本文链接：https://blog.youkuaiyun.com/iceberg_Yao/article/details/53428944

Web前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了前端开发中处理URL参数的方法，包括解析URL参数为对象、根据需求重构参数并生成新的URL参数字符串，适用于对URL参数进行操作的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端开发中经常会对url进行解析加以使用，在此整理下相关需求实现代码。
1. 提供url参数，也就是location.search的值如下：
var url = 'http://www.baidu.com?name=xiaohei&bir=1989&sex=men#abc';
2. 将参数解析成此种对象规格：
Object {name: "xiaohei", bir: "1989", sex: "men"}

相应的函数编写以及调用如下：

function  analyseUrl(url){
    var obj = {},
        arr = [];
    if(url.indexOf('?') != -1){
        var opt = url.split('?');
                var str = opt[1];
        arr = str.split('&');
        var arrLast = arr[arr.length - 1];
        if(arrLast.indexOf('#') != -1){
            arr[arr.length - 1] = arrLast.substr(0, arrLast.indexOf('#'));
        }
        for(var i = 0; i < arr.length; ++i){
            var para = arr[i].split('=');
            obj[para[0]] = para[1];
        }
    }
    return obj;
}
var paraObj = analyseUrl(url);

返回的对象即包含url参数名和对应的参数值，如果仅仅是需要参数数据使用于编码中，那么这个对象内容可以满足对参数的使用需求。
3. 如果需要重构url，需求如对相关参数进行重新赋值，则添加以下步骤：

提供参数对照映射表
var paraList = {"name" : "dahei", "age" : "12", "bir" : "1989"};
对返回的对象进行参数值重构

for(var j in paraList){
    paraObj[j] = paraList[j];
}

重新拼接url参数字符串

var newPara = '';
for(var k in paraObj){
    newPara += k + '=' + paraObj[k] + '&';
}
newPara = newPara.substr(0, newPara.length - 1);

至此，便可以构造如下url参数newPara：
name=dahei&bir=1989&sex=men&age=12