HTML、JS、JSON特殊字符 - JS到HTML特殊字符转换

时间：2022-11-02 17:22:17

JS到HTML特殊字符转换

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

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

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

Html代码  HTML、JS、JSON特殊字符 - JS到HTML特殊字符转换
  1. <html>  
  2. <body>  
  3. <div id="div1" ></div>  
  4. <div id="div2" ></div>  
  5. <script >  
  6. var str = '<b>msg</b>&nbsp;&#35;';  
  7. document.all.div1.innerHTML='<pre>'+str+'</pre>';  
  8.   
  9. //js中的字符串正常显示在HTML页面中  
  10. String.prototype.displayHtml= function(){  
  11.     //将字符串转换成数组  
  12.     var strArr = this.split('');  
  13.     //HTML页面特殊字符显示，空格本质不是，但多个空格时浏览器默认只显示一个，所以替换  
  14.     var htmlChar="&<>";  
  15.     for(var i = 0; i< str.length;i++){  
  16.         //查找是否含有特殊的HTML字符  
  17.         if(htmlChar.indexOf(str.charAt(i)) !=-1){  
  18.             //如果存在，则将它们转换成对应的HTML实体  
  19.             switch (str.charAt(i)) {                          
  20.                 case '<':  
  21.                     strArr.splice(i,1,'&#60;');  
  22.                     break;  
  23.                 case '>':  
  24.                     strArr.splice(i,1,'&#62;');  
  25.                     break;  
  26.                 case '&':  
  27.                     strArr.splice(i,1,'&#38;');  
  28.             }  
  29.         }  
  30.     }  
  31.     return strArr.join('');  
  32. }  
  33. alert(str.displayHtml());  
  34. document.all.div2.innerHTML=str.displayHtml();  
  35.   
  36. </script>  
  37. </body>  
  38. </html>  

 

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


HTML、JS、JSON特殊字符 - JS到HTML特殊字符转换
 

JSP到HTML特殊字符转换

以上是通过JS将后台传递过来的数据显示在页面之前的转换，有时是通过JSP生成HTML页面内容，此时的特殊字符会比上面多，另外此时的转换需要通过服务器端转换后再输出到HTML页面。如 jsp页面在生成HTML时如下：Html代码  HTML、JS、JSON特殊字符 - JS到HTML特殊字符转换
  1. <input type='txt' value='<%=msg %>'>  
如果 msg 为 I'am> 时，第一页面会乱，第二文本框中显示的值不正确
HTML、JS、JSON特殊字符 - JS到HTML特殊字符转换
  。这是由于HTML标签属性值可以使用双引号也可使用单引号，如果HTML使用的是单引号，而值中也包含单引号时，就会出现问题，双引号同样也有这样的问题，由于大都数情况下，页面中属性使用双引号还是单引号没有规范下来，所以服务器端传递来的单引号与双引号都需要转换。另外像<、>就不用说了，也是需要转换的，所以此种情况下应该至少<>"'& 这5个需要特殊转换。Java代码  HTML、JS、JSON特殊字符 - JS到HTML特殊字符转换
  1. // HTML字符转换表  
  2. public final static Map<String, String> HTML_CHAR = new HashMap<String, String>();  
  3. static {  
  4.     HTML_CHAR.put("&", "&#38;");          
  5.     HTML_CHAR.put("\"", "&#34;");  
  6.     HTML_CHAR.put("<", "&#60;");  
  7.     HTML_CHAR.put(">", "&#62;");   
  8.     HTML_CHAR.put("'", "&#39;");          
  9. }  
  10.   
  11. public static final StringBuilder toHTMLChar(String str) {  
  12.     if (str == null) {  
  13.         return new StringBuilder();  
  14.     }         
  15.     StringBuilder sb = new StringBuilder(str);  
  16.   
  17.     char tempChar;  
  18.     String tempStr;  
  19.     for (int i = 0; i < sb.length(); i++) {  
  20.         tempChar = sb.charAt(i);  
  21.         if (HTML_CHAR.containsKey(Character.toString(tempChar))) {  
  22.             tempStr = (String) HTML_CHAR.get(Character  
  23.                     .toString(tempChar));  
  24.             sb.replace(i, i + 1, tempStr);  
  25.             i += tempStr.length() - 1;  
  26.         }  
  27.     }  
  28.     return sb;  
  29. }  
 在输出到HTML之前使用上面的toHTMLChar(msg).toString()转换一下即可：
HTML、JS、JSON特殊字符 - JS到HTML特殊字符转换
 

Java到JSON特殊字符转换

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

am"}

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

 

Java代码  HTML、JS、JSON特殊字符 - JS到HTML特殊字符转换
  1. response.setContentType("application/json");  
  2.   
  3. Writer wr = response.getWriter();  
  4.   
  5. if(exceptionTrace.indexOf("'")!=-1){  
  6.     //将单引号转义一下，因为JSON串中的字符串类型可以单引号引起来的  
  7.     exceptionTrace = exceptionTrace.replaceAll("'", "\\'");  
  8. }  
  9. if(exceptionTrace.indexOf("\"")!=-1){  
  10.     //将双引号转义一下，因为JSON串中的字符串类型可以单引号引起来的  
  11.     exceptionTrace = exceptionTrace.replaceAll("\"", "\\\"");  
  12. }  
  13.   
  14. if(exceptionTrace.indexOf("\r\n")!=-1){  
  15.     //将回车换行转换一下，因为JSON串中字符串不能出现显式的回车换行  
  16.     exceptionTrace = exceptionTrace.replaceAll("\r\n", "\\u000d\\u000a");  
  17. }  
  18. if(exceptionTrace.indexOf("\n")!=-1){  
  19.     //将换行转换一下，因为JSON串中字符串不能出现显式的换行  
  20.     exceptionTrace = exceptionTrace.replaceAll("\n", "\\u000a");  
  21. }  
  22.   
  23. wr.write("{success:false,exception:true,msg:'" +exceptionTrace + "'}");  
  24. wr.flush();  
  25. wr.close();  

 

最常用的字符实体(Character Entities)

显示结果 说明 Entity Name Entity Number
  显示一个空格 &nbsp; &#160;
< 小于 &lt; &#60;
> 大于 &gt; &#62;
& &符号 &amp; &#38;
" 双引号 &quot; &#34;

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

显示结果 说明 Entity Name Entity Number
© 版权 &copy; &#169;
® 注册商标 &reg; &#174;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;
标签：

相关文章