JS到HTML特殊字符转换
用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 id="div1" ></div>
- <div id="div2" ></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显示正常,显示结果如下:
JSP到HTML特殊字符转换
以上是通过JS将后台传递过来的数据显示在页面之前的转换,有时是通过JSP生成HTML页面内容,此时的特殊字符会比上面多,另外此时的转换需要通过服务器端转换后再输出到HTML页面。如 jsp页面在生成HTML时如下:- <input type='txt' value='<%=msg %>'>
。这是由于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;
- }
Java到JSON特殊字符转换
由于从服务器后端生成JSON格式的字符串,最后传递到客户端由 eval() 函数动态的生成Javascript,如果JSON字符串格式错误,则eval解析会出错,经常也是最常出错的是" ' \r\n 这三个字符,如 {name:'I'am'}解析时会出错,同样,由于JavaScript中的字符串可由单引号也可由双引号引起来,所以双引号一样也有这样问题。另外,字符串是不能跨行写的,即你不能写成这样:{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("\r\n")!=-1){
- //将回车换行转换一下,因为JSON串中字符串不能出现显式的回车换行
- exceptionTrace = exceptionTrace.replaceAll("\r\n", "\\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();
最常用的字符实体(Character Entities)
显示结果 | 说明 | Entity Name | Entity Number |
显示一个空格 | |   | |
< | 小于 | < | < |
> | 大于 | > | > |
& | &符号 | & | & |
" | 双引号 | " | " |
其他常用的字符实体(Character Entities)
显示结果 | 说明 | Entity Name | Entity Number |
© | 版权 | © | © |
® | 注册商标 | ® | ® |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |