JavaScript中url 传递参数(特殊字符)解决方法

￡神魔★判官ぃ 2022-09-20 05:52 176阅读 0赞

有些符号在URL中是不能直接传递的，如果要在URL中传递这些特殊符号，那么就要使用他们的编码了。下表中列出了一些URL特殊符号及编码

十六进制值

1. + URL 中+号表示空格 %2B   
2. 空格 URL中的空格可以用+号或者编码 %20   
3. / 分隔目录和子目录 %2F   
4. ? 分隔实际的 URL 和参数 %3F   
5. % 指定特殊字符 %25   
6. \# 表示书签 %23   
7. & URL 中指定的参数间的分隔符 %26   
8. = URL 中指定参数的值 %3D   
  
  
解决的方法：   
  
replace() 方法如果直接用str.replace("-","!") 只会替换第一个匹配的字符.   
而str.replace(/\\-/g,"!")则可以替换掉全部匹配的字符(g为全局标志)。   
replace()   
  
js中替换字符变量如下：   
  
data2=data2.replace(/\\%/g,"%25");   
data2=data2.replace(/\\\#/g,"%23");   
data2=data2.replace(/\\&/g,"%26");   
  
======================================================   
在使用url进行参数传递时，经常会传递一些 中文名（或含有特殊字符）的参数或URL地址，在后台处理时会发生转换错误。在有些传递页面使用GB2312，而在接收页面使用UTF8，这样接收到的参 数就可能会与原来发生不一致。使用服务器端的urlEncode函数编码的URL，与使用客户端java的encodeURI函数编码的URL，结果就不 一样。   
  
java对文字进行编码涉及3个函数：escape,encodeURI,encodeURIComponent，相应3个解码函数：unescape,decodeURI,decodeURIComponent   
  
java中的编码方法：   
escape() 方法：采用ISO Latin字符集对指定的字符串进行编码。所有的空格符、标点符号、特殊字符以及其他非ASCII字符都将被转化成%xx格式的字符编码（xx等于该字符 在字符集表里面的编码的16进制数字）。比如，空格符对应的编码是%20。unescape方法与此相反。不会被此方法编码的字符： @ \* / +   
encodeURI()方法：把URI字符串采用UTF-8编码格式转化成escape格式的字符串。不会被此方法编码的字符：! @ \# $& \* ( ) = : / ; ? + '   
encodeURIComponent ()方法：把URI字符串采用UTF-8编码格式转化成escape格式的字符串。与encodeURI()相比，这个方法将对更多的字符进行编码，比如 / 等字符。所以如果字符串里面包含了URI的几个部分的话，不能用这个方法来进行编码，否则 / 字符被编码之后URL将显示错误。不会被此方法编码的字符：! \* ( )   
因 此，对于中文字符串来说，如果不希望把字符串编码格式转化成UTF-8格式的（比如原页面和目标页面的charset是一致的时候），只需要使用 escape。如果你的页面是GB2312或者其他的编码，而接受参数的页面是UTF-8编码的，就要采用encodeURI或者 encodeURIComponent。   
  
另外，encodeURI/encodeURIComponent是在java1.5之后引进的，escape则在java1.0版本就有。   
1、 传递参数时需要使用encodeURIComponent，这样组合的url才不会被\#等特殊字符截断。   
 例如：

Html代码 ![收藏代码][icon_star.png]

1.  **<** language**language**="java"**>**write('**<****a** href="http://passport.baidu.com/?logout&aid=7&u='+encodeURIComponent("http://cang.baidu.com/bruce42")+'"**>**退出**</****a****>**');**</****>**

2、 进行url跳转时可以整体使用encodeURI   
例如：

Java代码 ![收藏代码][icon_star.png]

1.  Location.href=encodeURI("http://cang.baidu.com/do/s?word=百度&ct=21");

3、 js使用数据时可以使用escape   
例如：搜藏中history纪录。   
4、 escape对0-255以外的unicode值进行编码时输出%u\*\*\*\*格式，其它情况下escape，encodeURI，encodeURIComponent编码结果相同。   
最多使用的应为encodeURIComponent，它是将中文、韩文等特殊字符转换成utf-8格式的url编码，所以如果给后台传递参数需要使用encodeURIComponent时需要后台解码对utf-8支持（form中的编码方式和当前页面编码方式相同）   
escape不编码字符有69个：\*，+，-，.，/，@，\_，0-9，a-z，A-Z   
encodeURI不编码字符有82个：!，\#，$，&，'，(，)，\*，+，,，-，.，/，:，;，=，?，@，\_，~，0-9，a-z，A-Z   
encodeURIComponent不编码字符有71个：!， '，(，)，\*，-，.，\_，~，0-9，a-z，A-Z   
以下是url中可能用到的特殊字符及在url中的经过编码后的值：   
字符   
  
特殊字符的含义   
  
URL编码

<table style="border:1px solid rgb(204,204,204); color:rgb(0,0,0); font-family:Helvetica,Tahoma,Arial,sans-serif; font-size:14px; line-height:25.1875px"> 
 <tbody> 
  <tr> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">符号</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">解释</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">转义</td> 
  </tr> 
  <tr> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">#</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">用来标志特定的文档位置</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">%23</td> 
  </tr> 
  <tr> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">%</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">对特殊字符进行编码</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">%25</td> 
  </tr> 
  <tr> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">&amp;</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">分隔不同的变量值对</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">%26</td> 
  </tr> 
  <tr> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">+</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">在变量值中表示空格</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">%2B</td> 
  </tr> 
  <tr> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">/</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">表示目录路径</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">%2F</td> 
  </tr> 
  <tr> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">\</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">表示目录路径</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">%5C</td> 
  </tr> 
  <tr> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">=</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">用来连接键和值</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">%3D</td> 
  </tr> 
  <tr> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">?</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">表示查询字符串的开始</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">%3F</td> 
  </tr> 
  <tr> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">空格</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">空格</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">%20</td> 
  </tr> 
  <tr> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">.</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">句号</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">%2E</td> 
  </tr> 
  <tr> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">:</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">冒号</td> 
   <td style="font-size:1em; border:1px solid rgb(204,204,204); padding:3px">%3A</td> 
  </tr> 
 </tbody> 
</table>

项目中发现，直接对url中的参数部分做encodeURI（）编码转换，后台servlet通过getParamater（）获取时，不需要转换可以直接获取到正确的值。

[icon_star.png]: /images/20220828/6cf08e7330ff44b0849f504a0b0c0d96.png