JS到HTML特殊字符转换
这几天做项目,发现从服务器端以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 %>'>
如果 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()转换一下即可:
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();
- 大小: 2.9 KB
- 大小: 1.6 KB
- 大小: 1.8 KB
分享到:
相关推荐
有时在处理html时, 为了和php结合的方便, 会利用数组a[]这里的id,或者id中包含其他特殊字符比如 /@ 等为了利用jquery获取该元素, 需要转义特殊字符 直接上例子 代码如下: ”a[]”>kkkkkk</div> [removed] //方法1 $...
将文件复制到本地驱动器中将模块导入javascript中,使用通过VedicAstroAPI的查询接收到的JSON响应调用该函数,并呈现该函数返回HTML字符串 例子 var axios = require( ' axios ' ) // axios is to send and receive ...
默认情况下PHP的 json_decode 方法会把特殊字符进行转义,还会把中文转为Unicode编码形式。 这使得数据库查看文本变得很麻烦。所以我们需要限制对于中文的转义。 对于PHP5.4+版本,json_decode函数第二个参数,可以...
如果有特殊的情况,FeHelper插件甚至还可以帮助用户把普通的字符直接编码成时下最流行的二维码图片与移动设备交互。好吧,FeHelper的功能有: 字符串编解码(Unicode/UTF8/Base64/MD5) 代码美化工具...
ZSON 解析器去除了这种特殊语法并将输入转换为纯 JSON,然后由您选择的 JSON 解析器进行解释。 演示: : 单行注释你现在有了这些。 哈扎。 { // Do not change unless you really, REALLY mean it. "self-destruct...
第1章 JavaScript简介 1 1.1 JavaScript是什么 1 1.2 JavaScript不是什么 2 1.3 JavaScript的用处 3 1.4 JavaScript及其在Web页面中的位置 3 1.5 Ajax是什么 5 1.6 JavaScript是什么样子的 6 1.7 ...
3.2.9 其他特殊符号 50 3.3 设置段落格式 51 3.3.1 段落标记——p 51 3.3.2 取消文字换行标记——nobr 52 3.3.3 换行标记——br 53 3.3.4 保留原始排版方式标记——pre 53 3.3.5 居中对齐标记——...
"json": 将响应作为JSON求值,并返回一个Javascript对象。 "jsonp": 使用JSONP载入一个JSON代码块. 会在URL的末尾添加"?callback=?"来指明回调函数。(jQuery 1.2以上的版本支持) "text": 文本格式的...
- 实现中很多功能基于特定的版本(`wcc-v0.6vv_20180111_fbi`, 且不考虑面向低版本适配)和字符串搜索,所以不能很好的适应各种特殊情况。 - wxml 文件拥有不同于 xml 和 html 文件的字符转义规则,且尚未公开(并非...
javascript字符串操作以及跑马灯实例 javascript数组和字典以及for循环 javascript条件语句 javascript函数的定义 Dom直接选择器 Dom间接选择器 示例之模态对话框 示例之全选和反选以及取消 javascript必须加分号 ...
网络桌面用Javascript编写您的linux bar和(最终)桌面背景! 当然,它不像Lemonbar轻巧,但是,嘿,现在的计算机速度很快... 它们是javascript字符串,如果它们以~开头,我会添加一些特殊处理。 随意使用您想要的任何
参数:可定义多个JSON对象数组,示例如下:{qq:{name:'QQ',count:55,width:25,height:25,line:11},msn:{name:'MSN',count:40,width:22,height:22,line:8}} name:表情分组名 count:表情数量 list:表情列表,例...
翻译JavaScript代码中的字符串280 103范式、秘诀和技巧282 按照设定的地区初始化应用282 将地区标识作为URL一部分带来的问题283 切换地区284 针对日期、数字和货币的自定义过滤器285 104小结287 第11章开发...
超降价这是一个动态的markkown包含服务器-它解析特殊的包含语法并包括远程markdown,然后呈现结果的markdown。 项目的一部分: treeBuilder( markdownText, callback ) :读取文本并递归获取以+[file name](url)格式...
2.24 限制输入框仅接受特殊字符的输入 2.25 禁止页面内全部超链接 2.26 实现动态组合列表框 2.27 如何使用属性过滤器 2.28 如何测试某个元素是否可见 第3章 jQuery操作HTML事件 3.1 禁止或启用输入框 3.2 实时监听...
特点:集成了SNS/CMS/论坛/博客/相册等应用程序的互联网产品...√json:对象列表生成字符串的bug √验证框架增加了对 select/checkbox/radio的支持 √弹窗中form返回带上多余的布局页面 √ajaxPostForm 多次提交表单
语言:中文 (简体) 程序开发常用工具,哈希/加解密/编码转换/...2-64进制互转|√||正则表达式|字符匹配|√||随机字符生成器|`批量`,`特殊字符`|√||序列化转换|`json`, `xml`, `yaml`, `phpArray`, `phpSerialize`, `pro
大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。 注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的...