uncaught URIError:URI malformed at decodeURIComponent——encodeURI编码后通过decodeURI转义时报错问题解决

素颜马尾好姑娘i 2022-08-28 05:00 8阅读 0赞

最近在写电商前台页面时，遇到一个路径转义的问题，虽然数据一直都是正常展示的，但是控制台会报错：  
`uncaught URIError:URI malformed at decodeURIComponent`  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16]  
功能介绍：  
用户输入内容后，点击`搜现货`，就调用`encodeURI`编码，整个页面路径更改为检索的内容，然后页面重新渲染，此时需要将页面路径中的关键字取出来，因为有时需要从别的地方跳转到此页面，因此取链接时，需要`decodeURI`进行转义。如果用户输入的内容中包含`%`，则在用`decodeURI`转义时，就会报错了。

一定要确定报错的是单独输入的`%`还是`encodeURI`之后的`%`;

出现这种报错的原因都是单独输入的`%`

网上给出的答案都是：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16 1]

# 网上的解决方案就是：在进行`encodeURI`之前，将`%`转义为`%25`,然后再进行`encodeURI`; #

这种方法是错误的！！！

因为`encodeURI`的过程就是将特殊符号编码：比如`%`编码为`%25`,空格编码为`%20`等。如果在`encodeURI`之前将`%`转义为`%25`,则经过`encodeURI`之后就变成了`%2525`,这样就更离谱了。

一定要清楚：控制台报错的原因是：`encodeURI`之后的`%25`转义后的`%`报的错。也就是说`decodeURI`不允许参数有`%`，而非`%25`,它会自动把`%25`转义为`%`，这个转义后的`%`导致的报错。

# 一个比较笨但有效的解决办法 #

既然`decodeURI`的参数中不能存在`%`，则在进行`encodeURI`之前就将`%`替换为一个独特的字符串，然后再进行`encodeURI`,`decodeURI`,最后再将独特的字符串转化为`%`，就可以了

![在这里插入图片描述][71b81f9ffae1488380fce46b6f290719.png]

## `encodeURI`编码之前处理`%` ##

...
     search_val = search_val.replace("%", 'baifenhao');
     var url = encodeURI(search_val);
     ...

## `decodeURI`处理路径参数 ##

var s = decodeURI(window.location.href);
     var startIndex = s.lastIndexOf('/') + 1;
      var lastIndex = s.lastIndexOf('.');
      var searchWord = '';
      if (startIndex > -1 && lastIndex > -1) { 
          searchWord = s.substring(startIndex, lastIndex);
      }
      searchWord = searchWord.replace("baifenhao", "%");

问题解决！！！

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/30433fa7fc3745f98a8d772bbe83ac9c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/c98aa704082b424c87f6e1ceea73380c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAeWVoYW9jaGVuZzUyMA==,size_20,color_FFFFFF,t_70,g_se,x_16
[71b81f9ffae1488380fce46b6f290719.png]: https://img-blog.csdnimg.cn/71b81f9ffae1488380fce46b6f290719.png