浏览器对url字符的处理

浏览器对url字符的处理

最近在开发前端，遇到了url参数编码的问题，在此记录下，以便后续查询。

特此说明：笔者用的是Chrome，其他浏览器没验证过。

1. Base64

为了不让url参数直接裸奔，简单做法是使用Base64进行编码传递，获取后再解析即可，也可以解决一些特殊字符的问题。

Base64使用64个字符作为一个基本字符集

小写字母a-z

大写字母A-Z

数字0-9

符号"+“、”/“、”="

因此在使用过程中，笔者也遇到Base64特殊字符的问题。

2. 浏览器转换

查询了好多文章后，总结如下：

其中"/“笔者没有遇到过问题，主要是”+“和”="

“+”：+ → 空格 → %20

“=”：= → %3D

1. 对于"+“：浏览器会先转为空格，再转为”%20"，在浏览器网址输入框中显示的就是"%20"
2. 对于"=“：浏览器会转为”%3D"，在浏览器网址输入框中显示的就是"%3D"

3. 接收转换

一开始接收url参数的时候一直报错，知道了浏览器的转换规则后，就需要把符号转换回来。

/**
 * @Description 修正url参数，因浏览器转换会造成特殊字符变更
 * @Author Nile
 * @Date 17:31 2022/4/3
 * @param param url参数
 * @return 修正后参数
 */
export function amendUrlParam(param: string) {
    return param.replace(/%20/g, '+').replace(/%3D/g, '=').replace(/\s+/g, '+');
}

笔者用的typescript进行编程，Angular7和VUE3都使用，在这两个框架下可以正常转为原来字符。

而且其实不需要 .replace(/%20/g, '+').replace(/%3D/g, '=') ，前端取到的数据就已经是空格和"=“，只需要将空格转为”+"即可。

4. 巨人的肩膀

笔者一开始使用replaceAll()函数进行全量替换，结果失败了，这个函数是有限制的，老老实实回去看了正则。

// 这种使用方法只会替换匹配到的第一个字符
export function amendUrlParam(param: string) {
    return param.replace(' ', '+');
}

所以replaceAll()函数大伙慎用慎用！！！一定要测试到位！！！

JavaScript replaceAll() 方法