js获取当前url地址参数中文乱码问题

本文解决了一个常见的网页问题——URL地址栏中文显示为乱码。文章详细介绍了如何从前端角度处理这一问题,包括如何正确地解析URL参数并避免重复转码导致的乱码现象。

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

  不知道从什么时候起,百度出来的回答大部分都是博客园的文章了,就拿本章的问题查找的答案来说,内容大部分没区别,而且所答非所问,明明帖子的问题是url地址栏的中文乱码问题,但是回答的都什么云里雾里的,复制粘贴也不粘点质量高的。

  项目中的页面跳转后获取url参数的问题,因为是抽取出来的放到独立页面上的模块,貌似没办法用 angular 本身自带的 $stateParams 来获取跳转携带参数,只能通过当前页面的url获取,window.location.href 。

  项目中支持通话列表表格内容单项双击跳转打开新页面,后来抽出独立页面也支持了url地址栏直接输入接口跟参数直接跳转,参数也有中文情况,传输中文时遇到了点小问题:前台底层获取的url的中文是乱码。

  开始以为是后台请求接口时,中文参数转码有问题,前台是有封装一个获取并整理url参数到一个对象的方法的,输出后的对象中对应中文的属性值完全是乱码,怎么办呢?解吧,decodeURI,没解开。后来看封装好的获取参数整理成一个对象的方法时,发现了问题,居然将获取的值进行了两次转码,好坑呀~

  这里记录一下前台解析url整理成对象的方法。

 

//首先获取到当前页面的地址栏信息
var url = window.location.href;
console.log(url);

var obj = {};
var reg = /\?/;
if(url.match(reg)) {
    //判断传入参数,以问号截取,问号后是参数
    var chars = url.split('?')[1];

    //再截&号
    var arr = chars.split('&');

    //获得截取后的数组为键值对字符串
    for (var i = 0; i < arr.length; i++) {

        //保守一点确定看是否为 name=value形式
        var num = arr[i].indexOf("=");

        if (num > 0) {
            //拼接字符串
            var name = arr[i].substring(0, num);
            var value = arr[i].substr(num + 1);

            //拼接对象,并转码
            obj[decodeURIComponent(name)] = decodeURIComponent(value);
        }
    }
}
console.log(obj);

 

最后存储对象属性时,可以不对 name 进行转码,因为一般 name 都为 key 值,通过使用 key 来获得其对应的 value ,所以 value 的值才是广泛的多样的,会有中文值的可能,但是估计不会有后台将 key 值也存成中文,谁见过键值对中 key 是用中文来使用的?

转载于:https://www.cnblogs.com/guofan/p/6646702.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值