zoukankan      html  css  js  c++  java
  • 细讲encodeURI和encodeURIComponent以及escape的区别与应用

    首先,我们都知道这三个东西都是用来编码的

    先来说encodeURI()和encodeURIComponent()

    这两个是在转换url时候用来编码解码用的。

    有编码就会有解码,

    解码就是decodeURI()和decodeURIComponent()

    他们的用法很简单,在参数中带入要转码的文字就可实现目的

    如:

      encodeURI("我是要编码的文字")

      decodeURI("我是要解码的文字")

      encodeURIComponent("我是要编码的文字")

      decodeURIComponent("我是要解码的文字")


    而encodeURI()和encodeURIComponent()的区别其实并不大

    主要区别在于:

    encodeURI不编码字符有82个:!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z,A-Z

    encodeURIComponent不编码字符有71个:!, ',(,),*,-,.,_,~,0-9,a-z,A-Z

    encodeURI主要用于直接赋值给地址栏时候: 

    1 location.href=encodeURI("http://www.cnblogs.com/Tezml/");

    而encodeURIComponent主要用于url的query参数:

    1
    location.href="http://www.cnblogs.com/Tezml/test.php?a="+encodeURIComponent("我就是我");

    而escape,相比于上面那两个,就有所不同了

    escape()是编码,unescape()是解码;

    escape 方法

    对 String 对象编码以便它们能在所有计算机上可读,

    escape(charString)
    必选项 charstring 参数是要编码的任意 String 对象或文字。

    说明
    escape 方法返回一个包含了 charstring 内容的字符串值( Unicode 格式)。所有空格、标点、重音符号以及其他非 ASCII 字符都用 %xx 编码代替,

    其中 xx 等于表示该字符的十六进制数。例如,空格返回的是 "%20" 。

    字符值大于 255 的以 %uxxxx 格式存储。

    escape不编码字符有69个:*,+,-,.,/,@,_,0-9,a-z,A-Z

    注意   escape 方法不能够用来对统一资源标示码 (URI) 进行编码。对其编码应使用 encodeURI 和encodeURIComponent 方法。

    最后上一段关于编码解码的demo

    <!DOCTYPE html>
    <html>
     <head>
      <title>Tezml_编码解码测试</title>
      <meta charset="utf-8">
      <meta name="author" content="Tezml" />
      <meta name="copyright" content="Tezml" />
      <meta name="description" content="Tezml" />
      <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    </head>
    <body>
    <div id="wz1"></div>
    <div id="wz2"></div>
    <div id="wz3"></div>
    <div id="wz4"></div>
    <div id="wz5"></div>
    <div id="wz6"></div>
    <div id="wz7"></div>
    <div id="wz8"></div>
    <div id="wz9"></div>
    <div id="wz10"></div>
    <div id="wz11"></div>
    <div id="wz12"></div>
    </body>
    <script type="text/javascript">
    var chinese="请叫我中文"
    var english="place tall me englash"
    var Monster=":#&$/@"
    
    $("#wz1").html(encodeURI(chinese))//编码 %E8%AF%B7%E5%8F%AB%E6%88%91%E4%B8%AD%E6%96%87
    
    $("#wz2").html(decodeURI(chinese))//解码 请叫我中文
    
    $("#wz3").html(encodeURI(english))//编码 place%20tall%20me%20englash
    
    $("#wz4").html(decodeURI(english))//解码 place tall me englash
    
    $("#wz5").html(encodeURIComponent(Monster))//编码 %3A%23%26%24%2F%40
    
    $("#wz6").html(encodeURI(Monster))//编码 :#&$/@
    
    $("#wz7").html(escape(chinese))//编码 %u8BF7%u53EB%u6211%u4E2D%u6587
    
    $("#wz8").html(escape(english))//编码 place%20tall%20me%20englash
    
    $("#wz9").html(escape(Monster))//编码 %3A%23%26%24/@
    
    $("#wz10").html(unescape(chinese))//编码 请叫我中文
    
    $("#wz11").html(unescape(english))//编码 place tall me englash
    
    $("#wz12").html(unescape(Monster))//编码 :#&$/@
    
    </script>
    </html>
  • 相关阅读:
    git 好文引流
    无法访问Swagger 或 druid面板无法访问 #报异常
    MachineLearning入门-7(数据理解)
    MachineLearning入门-6(数据导入)
    MachineLearning入门-5(Python和Scipy简介)
    百度PaddlePaddle入门-10(数据处理)
    百度PaddlePaddle入门-9(建模)
    百度PaddlePaddle入门-8(模型探讨)
    MachineLearning入门-4(理解数据集)
    百度PaddlePaddle入门-7 (Numpy的应用)
  • 原文地址:https://www.cnblogs.com/Tezml/p/4991112.html
Copyright © 2011-2022 走看看