html转义

借用一下此博主的blog

http://blog.163.com/zhaoyanping_1125/blog/static/201329153201111292515775/

 

在一个网页中的按钮,写onclick事件的处理代码,不小心写成如下:
<input value="Test" type="button" onclick="alert(""OK"");" />
IE提示出错后,再漫不经心地改为:
<input value="Test" type="button" onclick="alert(\"OK\");" />
结果还是出错。
这时,我就想不通了,虽然我知道最直接的解决方法是写成这样:
<input value="" type="button" onclick="alert(‘OK‘);" />
但为什么javascript中的转义字符\没有效果了呢?

后来找到一段正常的代码:
<input value="Test" type="button" onclick="alert(&quot;OK&quot;);" />
这时才理解,原来这时,还是归于HTML的管辖范围,所以转义字符应该使用HTML的,而不是javascript的。

两个双引号的做法是vbScript的,\"这种做法则是javascript的,而HTML的,则是用&quot;,

 
在最终渲染成html的时候,想显示",要变成&quot这种形式.比如以下这段代码
 var inputTpl = inputTplPre
        +  ‘<div class="mess-item-ex" id="mess-item-wrap-#num" >‘
            +  ‘<div class="mess-item-ex-inputs">‘
            +  ‘    <span data-ui="type:TextBox;id:mess-txt-#num;value:#key;maxLength:10"  ></span>‘
            +  ‘  <input class="mess-item-ex-cbk" type="checkbox" #necessity id="mess-cbk-#num" />‘
            +  ‘   <label for="mess-cbk-#num">必填</label>‘
            +  ‘</div>‘
            +  ‘<div class="mic-space">‘
            +  ‘    <a hidefocus="true" href="javascript:;" data-type="mics-down" class="mics cdown">xia</a>‘
            +  ‘    <a hidefocus="true" href="javascript:;" data-type="mics-up" class="mics cup" id="mics-up-#num">shang</a>‘
            +  ‘    <a hidefocus="true" href="javascript:;" data-type="mics-del" class="mics cdel" id="mics-del-#num">del</a>‘
            +  ‘</div>‘
        +  ‘</div>‘
        +  ‘</div>‘;

  陷阱1:在js时候,已经使用‘来表示字符串,以防止和”冲突。

  如果用“表示字符串,就该表示成

<span data-ui=\"type:TextBox;id:mess-txt-#num;value:#key;maxLength:10\"  ></span>"

  陷阱2:在解析#key时,需对#key进行编码

  如果不编码,#key解析 nihao 还是对的,但解析   "nihao"   的时候,字符串就会变成这样

    <span data-ui="type:TextBox;id:mess-txt-#num;value:"nihao";maxLength:10"  ></span>

  等于type前引号和value后引号成一对了。

  所以,要对#key进行encodeHtml,再替换进字符串中。即 #key == "nihao" -> &quot你好&quot

  替换后的字符串变成

    <span data-ui="type:TextBox;id:mess-txt-#num;value:&quot;nihao&quot;;maxLength:10"  ></span>

  这样解析出来的时候就对了。

 

  直观地附一张编解码的图

  

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。