A-A+

javascript中encodeURIComponent()用法

2016年01月14日 web前端设计 暂无评论 阅读 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.com"));  
  3.  document.write("<br />");  
  4.  document.write(encodeURIComponent("https://www.xiariboke.com/p 1/"));  
  5.  document.write("<br />");  
  6.  document.write(encodeURIComponent(",/?:@&=+$#"));  
  7. </script>  

输出:

  1. http%3A%2F%2Fwww.xiariboke.com  
  2. http%3A%2F%2Fwww.xiariboke.com%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=&topicIdHTTP/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

标签:

给我留言