zoukankan      html  css  js  c++  java

  • HTML、JS、JSON特殊字符

    JS到HTML特殊字符转换

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

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

    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>  
    <html>
<body>
<div id="div1" ></div>
<div id="div2" ></div>
<script >
var str = '<b>msg</b>&nbsp;&#35;';
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,'&#60;');
					break;
				case '>':
					strArr.splice(i,1,'&#62;');
					break;
				case '&':
					strArr.splice(i,1,'&#38;');
			}
		}
	}
	return strArr.join('');
}
alert(str.displayHtml());
document.all.div2.innerHTML=str.displayHtml();

</script>
</body>
</html>

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



     

    JSP到HTML特殊字符转换

    以上是通过JS将后台传递过来的数据显示在页面之前的转换，有时是通过JSP生成HTML页面内容，此时的特殊字符会比上面多，另外此时的转换需要通过服务器端转换后再输出到HTML页面。如 jsp页面在生成HTML时如下：
    Html代码 复制代码
    1. <input type='txt' value='<%=msg %>'>  
    <input type='txt' value='<%=msg %>'>
    如果 msg 为 I'am> 时，第一页面会乱，第二文本框中显示的值不正确


      。这是由于HTML标签属性值可以使用双引号也可使用单引号，如果HTML使用的是单引号，而值中也包含单引号时，就会出现问题，双引号同样也有这样的问题，由于大都数情况下，页面中属性使用双引号还是单引号没有规范下来，所以服务器端传递来的单引号与双引号都需要转换。另外像<、>就不用说了，也是需要转换的，所以此种情况下应该至少 <>"'& 这5个需要特殊转换。
    Java代码 复制代码
    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字符转换表
	public final static Map<String, String> HTML_CHAR = new HashMap<String, String>();
	static {
		HTML_CHAR.put("&", "&#38;");		
		HTML_CHAR.put("\"", "&#34;");
		HTML_CHAR.put("<", "&#60;");
		HTML_CHAR.put(">", "&#62;");	
		HTML_CHAR.put("'", "&#39;");		
	}

	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()转换一下即可：

     

    Java到JSON特殊字符转换

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

    am"}

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

    Java代码 复制代码
    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();  
  • 相关阅读:
    C++中的函数
    C++基本语句
    面向对象程序设计
    数据结构中的算法
    数据结构开篇
    条件编译
    文件包含
    简单的宏替换
    系统启动过程
    parted 命令学习
  • 原文地址：https://www.cnblogs.com/mahaisong/p/1966701.html
Copyright © 2011-2022 走看看