使用javascript的encodeURIComponent出现的问题

最新推荐文章于 2025-06-09 15:45:45 发布
原创 最新推荐文章于 2025-06-09 15:45:45 发布 · 2.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #spring #乱码 #utf-8

本文探讨了使用javascript的encodeURIComponent在不同环境下导致的乱码问题。分析了开发与线上环境中字符编码差异的原因，并提供了修改server.xml文件来统一字符编码的解决方案。

使用javascript的encodeURIComponent出现的问题

Symptom

在前端是使用encodeURIComponent进行转义的时候，在开发和线上环境出现了不同的表现。

前台传汉字过来，开发的时候直接过来是乱码，需要从ISO-8859-1转换成UTF-8才是正确的汉字

在线上却是直接就是汉字

Analyze

项目肯定需要配置CharacterEncodingFilter，如果是spring boot项目的话自动已经配置了，默认的字符集是UTF-8。如果是spring mvc项目的话，那么需要手动配置。

这样子就能设置好request和response的encoding。

观察线上和开发环境不同的是，在线上环境配置了:

export URI_ENCODING = UTF-8

那么肯定是因为这个才造成的差别。查一下就查到了tomcat的encoding配置，默认是iso-8859-1。

Solution

修改开发环境默认的encoding, 配置的方式是:

修改server.xml，在connector标签中设置<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" URIEncoding="UTF-8" />

添加环境变量应该也可以，不过在Windows上没有测试.

encodeURIComponent编码 URLDecoder.decode解码乱码的问题
BearRui的AK-47
10-07 1万+
搜索页面，传递key的时候，为了防止中文乱码，使用encodeURIComponent编码：     function searchSubmit(){                    reg = /[/S]+/;                    obj=$("search_word");                    if(!obj.value.match(reg)){    
报错类型及导致的原因
kalinara的博客
05-22 1047
SyntaxError（语法错误）原因：解析代码时发生的语法错误 ReferenceError（引用错误） 原因：引用了一个不存在的变量 Uncaught ReferenceError: 变量 is not defined 将变量赋值给一个无法被赋值的对象 RangeError（范围错误）原因：超出有效范围 TypeError（类型错误） 原因：变量或参数不是预期类型，比如，对字符串、布尔值
Error in onLoad hook: “URIError: URI malformed“ found in…报错处理以及完善uniapp针对对象传参
qq_45796592的博客
06-12 2316
处理Error in onLoad hook: “URIError: URI malformed“ found in
encodeURIComponent和decodeURIComponent
最新发布
热爱WebGIS的博客
06-09 1276
识别风险：任何时候，只要你想把一个可能包含特殊字符（&,?, /, #, 空格等）或中文的字符串放进URL，就要想起编码！选择武器：使用来对你的数据进行“伪装”，确保它在URL中安全传输。还原真相：在接收端，使用（或者更推荐的）来“卸妆”，获取原始数据。牢记区别：只在需要编码整个URL时才考虑，编码URL的部分时，请坚决使用。
decodeURIComponent 报错：URI malformed 的问题记录
chiele的专栏
01-26 4096
decodeURIComponent 处理接收数据的时候，要注意将数据转换，避免导致函数返回异常
解决encodeURIComponent传参时报Uncaught URIError: URI malformed的错误
gxdzi的博客
12-23 2160
uniapp和微信小程序在使用encodeURIComponent对url进行加密传参时，出现Uncaught URIError: URI malformed的错误，报这个错是因为传递的参数中包含了“%”字符，只需将%全部替换为%25再进行传参即可：str.replace(/%/g, ‘%25’);
encodeuricomponent转码window.hreaf方法无效，解决办法
曾经也是个少年
06-14 662
图片发自简书App 转两次，URL可能进行了一次解码操作
JavaScript encodeURI 和encodeURIComponent
10-23
encodeURI和encodeURIComponet函数都是javascript中用来对URI进行编码，将相关参数转换成UTF-8编码格式的数据。URI在进行定位跳转时，参数里面的中文、日文等非ASCII编码都会进行编码转换
深入解析：JavaScript中的`encodeURIComponent`与`decodeURIComponent`方法
09-15
为了解决这些问题，JavaScript提供了两个内置函数：encodeURIComponent和decodeURIComponent。这两个函数对于编码和解码URL组件至关重要。本文将详细探讨这两个函数的工作原理、使用场景以及如何在实际开发中正确...
javascript encodeURI和encodeURIComponent的比较
12-11
背景 encodeURI 和 encodeURIComponent都是ECMA-262标准中定义的函数,所有兼容这个标准的语言（如JavaScript, ActionScript）都会实现这两个函数。它们都是用来对URI （RFC-2396）字符串进行编码的全局函数，但是...
javascript 字符 Escape,encodeURI,encodeURIComponent
10-29
然而，如果你使用`encodeURIComponent()`编码整个URI，可能会导致URL的结构出现问题，因为/等字符在URI结构中有特殊含义。 当涉及到中文或其他非ASCII字符时，`escape()`通常不会改变字符的编码格式，除非页面和...
躲不过也要躲：让encodeURIComponent过的尖括号躲过ASP.NET的误拦截
weixin_33727510的博客
03-21 237
问题所处环境：IIS 7.5, ASP.NET 4.0, 应用程序池(Application Pool)运行于集成模式(Integrated)。 今天一位园友向我们反馈用网摘收藏博客文章LINQ那些事(9)-解析Table&lt;T&gt;.Attach引发的异常和解决方法时出错（注意：文章标题中有尖括号）。 我们查了一下，具体的错误信息是： A potentially dangerou...
url中文处理
wenle006的专栏
06-10 5892
js对文字进行编码涉及3个函数：escape,encodeURI,encodeURIComponent，相应3个解码函数：unescape,decodeURI,decodeURIComponent1、   传递参数时需要使用encodeURIComponent，这样组合的url才不会被#等特殊字符截断。                            例如：2、   进行url跳转时可以整体使用encodeURI例如：Location.href=encodeURI("http://cang.baidu
问题：encodeURIComponent()
kbx8916的博客
08-04 398
encodeURIComponent() 的用法
encodeURIComponent 乱码问题
faylai
11-27 514
 如果只使用一次encodeURIComponent方法，在服务端的Java程序中可以使用如下的方法解码：String s = new String(request.getParameter("name").getBytes("ISO8859-1"), "UTF-8");
encodeURIComponent编译后跳转传参导致错误
weixin_57415697的博客
07-17 409
【代码】encodeURIComponent编译后跳转传参导致错误。
decodeURIComponent中文转码问题
程序员超超的博客
03-27 1106
不知道大家有没有这样的困扰，汉字转码问题，因为浏览器会对汉字自动转码，并且某些302之后可能又转码了一次，并且有的值在各种页面的url上传递，传来传去，前端可能也不知道究竟转码了几次，然后后端就蒙蔽了，明明解码了呀，balabala。其实个人觉得最好尽量少使用汉字作为参数传递。不过要是必须用也是有办法的，那就是循环调用。对百分号敏感，所以需要用try catch 捕获异常，当error发生时，也停止继续。，直到转换完的和上一次的值是一样的为止，使用。时可能会报错，比如转码。，意思是百分之8，但是。
encodeURI 、encodeURIComponent 以及中文乱码问题
热门推荐
积跬步，成千里。
11-22 1万+
关于前端： encodeURIComponent(),  对文本框的输入值进行编码，特殊字符编码结果是%加上这些符号的ASCII码十六进制对照表。 encodeURI() 将整个url编码，但不会对如下字符进行编码  @#$&amp;=.:/;?+ ，这些符号的基本上就是http URL中的特殊符号，是不进行编码的。 @   # 网页中的一个位置 :/.?=&amp; ...
encodeURIComponent如何使用
06-08
### JavaScript 中 `encodeURIComponent` 的用法 `encodeURIComponent` 是一个用于对 URI 组件进行编码的内置 JavaScript 函数。它会对字符串中的非 ASCII 字符以及具有特殊含义的标点符号进行转义，确保生成的字符串可以安全地作为 URI 的一部分使用[^1]。 #### 主要特点 - 该函数会将除了字母、数字以及以下字符 `- _ . ! ~ * ' ( )` 以外的所有字符转换为百分号 `%` 后跟两位十六进制数的形式。 - 它特别适用于对 URI 查询字符串中的键或值进行编码[^4]。 #### 参数说明 - `uri`: 必需参数，表示需要被编码的 URI 组件或其他文本字符串。 #### 示例代码 以下是一个使用 `encodeURIComponent` 的示例： ```javascript var uri = "http://example.com/my test.php?name=ståle&car=saab"; document.write(encodeURIComponent(uri)); ``` 上述代码的输出结果为： ``` http%3A%2F%2Fexample.com%2Fmy%20test.php%3Fname%3Dst%C3%A5le%26car%3Dsaab ``` 在实际应用中，通常会结合表单数据来构造查询字符串。例如： ```javascript for (var i = 0; i < whichform.elements.length; i++) { var element = whichform.elements[i]; dataparts[i] = element.name + '=' + encodeURIComponent(element.value); } ``` 此代码片段展示了如何对表单元素的值进行编码并拼接成查询字符串的一部分[^3]。 #### 与 `encodeURI` 的区别 需要注意的是，`encodeURIComponent` 和 `encodeURI` 虽然功能相似，但存在关键差异。`encodeURI` 不会对某些在 URI 中具有特殊意义的字符（如 `?`, `#`, `&` 等）进行编码，而 `encodeURIComponent` 则会对这些字符进行编码。 #### 注意事项 当处理包含多维数组或复杂对象的数据时，建议先将其序列化为 JSON 字符串，然后再使用 `encodeURIComponent` 进行编码，以避免因特殊字符未被正确转义而导致的问题[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值