夏日博客

A-A+

javascript中encodeURIComponent()用法

2016年01月14日 前端设计 暂无评论 阅读 6 views 次

encodeURIComponent函数在我们js中经常会用到特别是对url编码时这个函数可强于大家常用的escape()这个函数了，下面看介绍。

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。

语法：encodeURIComponent(URIstring)

参数描述：URIstring 必需。一个字符串，含有 URI 组件或其他要编码的文本。

返回值：URIstring 的副本，其中的某些字符将被十六进制的转义序列进行替换。

说明：该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： – _ . ! ~ * ‘ ( ) 。其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

提 示：请注意 encodeURIComponent() 函数 与 encodeURI() 函数的区别之处，前者假定它的参数是 URI 的一部分（比如协议、主机名、路径或查询字符串）。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。

实例：在本例中，我们将使用 encodeURIComponent() 对 URI 进行编码：

  1. <script type="text/javascript">  
  2.  document.write(encodeURIComponent("https://www.xiariboke.net"));  
  3.  document.write("<br />");  
  4.  document.write(encodeURIComponent("https://www.xiariboke.net/p 1/"));  
  5.  document.write("<br />");  
  6.  document.write(encodeURIComponent(",/?:@&=+$#"));  
  7. </script>  

输出：

  1. http%3A%2F%2Fwww.xiariboke.net  
  2. http%3A%2F%2Fwww.xiariboke.net%2Fp%201%2F  
  3. %2C%2F%3F%3A%40%26%3D%2B%24%23  

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是在javascript1.5之后引进的，escape则在javascript1.0版本就有。

通过js encodeURIComponent传到服务器的乱码问题

二、解决过程:(1) 在JSP中使用encodeURIComponent来进行编码，两次编码:

  1. content=encodeURIComponent(encodeURIComponent(content));     
  2. var url="${pageContext.request.contextPath}/BlogAction.do?method=doPublishBlog&content="+content;    
  3. content=encodeURIComponent(encodeURIComponent(content));  
  4. var url="${pageContext.request.contextPath}/BlogAction.do?method=doPublishBlog&content="+content;     

(2) 在action中使用解码：

Java代码如下:

  1. String content=(String)request.getParameter("content");     
  2. content=URLDecoder.decode(content,"UTF-8");   
  3. String content=(String)request.getParameter("content");  
  4. content=URLDecoder.decode(content,"UTF-8");    

这个问题得以解决。

1）js 中encodeURI 与 encodeURIComponent的区别

encodeURI 方法返回一个编码的 URI。如果您将编码结果传递给 decodeURI，那么将返回初始的字符串。encodeURI 方法不会对下列字符进行编码：":"、"/"、";" 和 "?"。请使用 encodeURIComponent 方法对这些字符进行编码。经过我测试“#”也属于这个特殊字符的范畴，使用encodeURI编码时#是不会被编码的，所以上面场景的问题依然存在的，对于这种输入的内容，肯定是用encodeURIComponent。

2）IE对#的不同处理，从下面的header 内容可以看出来,代码如下:

  1. IE8:  
  2. POST /dcwb/BlogAction.do?method=doPublishBlog&content=%23���Ի���%23&decorator=exclude&gridId=&gridName=&videoId=&imageId=&topicId=  
  3.  IE6:  
  4. POST /dcwb/BlogAction.do?method=doPublishBlog&content=%23��������%20&decorator=exclude&gridId=&gridName=&videoId=&imageId=&topicId= HTTP/1.1  

最多使用的应为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

标签：

给我留言