HTML、JS、JSON特殊字符_H5之家 - 中国HTML5教程资源分享第一站

技术库:tec.5lulu.com

1 JS到HTML特殊字符转换

from:tec.5lulu.com

用JSTL标签显示不转义的字符：<c:out value="<%=nickname %>" escapeXml="false"/>

发现从服务器端以JSON格式将数据传递到客户端后，通过JS显示在HTML页面时，有一些特殊字符不能直接显示，如后台传递过来的是 '<b>msg</b> #' 通过JS显示在HTML页面中时，显示成了msg # ，并不是<b>msg</b> #，这是由于<与>之间的内容看作是HTML标签了，而以&开头的 与#为HTML实体，所以显示不正常。

解决办法很简单，在JS将其渲染到HTML页面前转换一下即可：

<html> <body> <div ></div> <div ></div> <script > var str = '<b>msg</b> #'; document.all.div1.innerHTML='<pre>'+str+'</pre>'; //js中的字符串正常显示在HTML页面中 String.prototype.displayHtml= function(){ //将字符串转换成数组 var strArr = this.split(''); //HTML页面特殊字符显示，空格本质不是，但多个空格时浏览器默认只显示一个，所以替换 var htmlChar="&<>"; for(var i = 0; i< str.length;i++){ //查找是否含有特殊的HTML字符 if(htmlChar.indexOf(str.charAt(i)) !=-1){ //如果存在，则将它们转换成对应的HTML实体 switch (str.charAt(i)) { case '<': strArr.splice(i,1,'<'); break; case '>': strArr.splice(i,1,'>'); break; case '&': strArr.splice(i,1,'&'); } } } return strArr.join(''); } alert(str.displayHtml()); document.all.div2.innerHTML=str.displayHtml(); </script> </body> </html>

上面在赋给div之前没有转换，所以显示不正常，第二个div显示正常，显示结果如下：

2 JSP到HTML特殊字符转换

以上是通过JS将后台传递过来的数据显示在页面之前的转换，有时是通过JSP生成HTML页面内容，此时的特殊字符会比上面多，另外此时的转换需要通过服务器端转换后再输出到HTML页面。如 jsp页面在生成HTML时如下：

如果 msg 为 I'am> 时，第一页面会乱，第二文本框中显示的值不正确。这是由于HTML标签属性值可以使用双引号也可使用单引号，如果HTML使用的是单引号，而值中也包含单引号时，就会出现问题，双引号同样也有这样的问题，由于大都数情况下，页面中属性使用双引号还是单引号没有规范下来，所以服务器端传递来的单引号与双引号都需要转换。另外像<、>就不用说了，也是需要转换的，所以此种情况下应该至少<>"'& 这5个需要特殊转换。

// HTML字符转换表 public final static Map<String, String> HTML_CHAR = new HashMap<String, String>(); static { HTML_CHAR.put("&", "&"); HTML_CHAR.put(""", """); HTML_CHAR.put("<", "<"); HTML_CHAR.put(">", ">"); HTML_CHAR.put("'", "'"); } public static final StringBuilder toHTMLChar(String str) { if (str == null) { return new StringBuilder(); } StringBuilder sb = new StringBuilder(str); char tempChar; String tempStr; for (int i = 0; i < sb.length(); i++) { tempChar = sb.charAt(i); if (HTML_CHAR.containsKey(Character.toString(tempChar))) { tempStr = (String) HTML_CHAR.get(Character .toString(tempChar)); sb.replace(i, i + 1, tempStr); i += tempStr.length() - 1; } } return sb; }

在输出到HTML之前使用上面的toHTMLChar(msg).toString()转换一下即可：

3 Java到JSON特殊字符转换

由于从服务器后端生成JSON格式的字符串，最后传递到客户端由 eval() 函数动态的生成，如果JSON字符串格式错误，则eval解析会出错，经常也是最常出错的是" ' rn 这三个字符，如 {name:'I'am'}解析时会出错，同样，由于中的字符串可由单引号也可由双引号引起来，所以双引号一样也有这样问题。另外，字符串是不能跨行写的，即你不能写成这样：{name:"I'

am"}

所以这3个需要转换，另外换行可能依赖于平台，所以 n 也需要转换，比如我们需要将后台抛出的异常栈信息以JSON的格式传回到浏览器上显示时，就需要将回车换行转换。代码如下：

response.setContentType("application/json"); Writer wr = response.getWriter(); if(exceptionTrace.indexOf("'")!=-1){ //将单引号转义一下，因为JSON串中的字符串类型可以单引号引起来的 exceptionTrace = exceptionTrace.replaceAll("'", "\'"); } if(exceptionTrace.indexOf(""")!=-1){ //将双引号转义一下，因为JSON串中的字符串类型可以单引号引起来的 exceptionTrace = exceptionTrace.replaceAll(""", "\""); } if(exceptionTrace.indexOf("rn")!=-1){ //将回车换行转换一下，因为JSON串中字符串不能出现显式的回车换行 exceptionTrace = exceptionTrace.replaceAll("rn", "\u000d\u000a"); } if(exceptionTrace.indexOf("n")!=-1){ //将换行转换一下，因为JSON串中字符串不能出现显式的换行 exceptionTrace = exceptionTrace.replaceAll("n", "\u000a"); } wr.write("{success:false,exception:true,msg:'" +exceptionTrace + "'}"); wr.flush(); wr.close(); 4 最常用的字符实体(Character Entities)

显示结果说明 Entity Name Entity Number

显示一个空格    

< 小于 < <

> 大于 > >

& &符号 & &

" 双引号 " "

5 其他常用的字符实体(Character Entities)

显示结果说明 Entity Name Entity Number

® 注册商标 ® ®

× 乘号 × ×

÷ 除号 ÷ ÷

HTML、JS、本文链接

我来评分 :7

已经成功评论!

转载注明：转自5lulu技术库

本站遵循：署名-非商业性使用-禁止演绎 3.0 共享协议