今天在项目中遇到一个问题,页面上的数据突然显示不出来了,查验后得知是Json数据出现了问题。使用JSON从后台向前台传输数据的时候,当数据本身含有一些特殊字符,会导致JSON数据的解析出错。如果内容中本身就包含了 "\"" 双引号、"\r\n" 回车换行这时候,数据的解析就会出现问题。
\r,\n,\r\n的区别
1
2
3
4
|
\n是换行,英文是New line,表示使光标到行首 \r是回车,英文是Carriage return ,表示使光标下移一格 \r\n表示回车换行 |
"\r\n"与"</br>"的区别
1
2
|
\r\n是输出的HTML代码换行(查看html代码时,代码换行了) <br />输出给浏览器换行(看网页效果时,文字换行了) |
用户在Textarea输入内容时,有时候会输入双引号,回车或者换行符,保存时,这些特殊符号也也文本内容一起保存到数据库里去了,当获取这些数据时,Json的解析就会出错
下面是有问题数据:
1
2
3
4
5
6
7
8
|
{ "employees" : [ { "firstName" : "Bill" , "lastName" : "Gates”" }, { "firstName" : "George 回车了" , "lastName" : "Bush" }, { "firstName" : "Thomas" , "lastName" : "Carter" } ] } |
不改动数据数据,怎样才能把数据传到页面上去呢。思路是后端把 \r\n(回车)转成<br/>再,前端再把<br/>转回 \r\n
C# 代码:
1 public static string EncodeTextareaChar(string str) 2 { 3 if (str == null) return null; 4 return str.Replace("\"", "\\\"").Replace("\r\n", "<br/>").Replace("\n", "<br/>").Replace("\r", "<br/>"); 5 }
Javascript代码
1 function encodeTextarea(str) { 2 str = str.replace(/</g, "<").replace(/>/g,">"); 3 var str = str.replace(/<br\/>/g, "\r\n"); 4 return str; 5 }
两种语言都有 replace() 方法,他们也略微有些区别,
Javascript的 replace 只替换一次,如"abcaebacd"中有两个c,它只替换第一个,replace("c","s"),结果是"absaebacd"
C#的replace替换全部,replace("c","s"),结果是"absaebasd"
注:Javascript 要想实现全部替换,可以 replace(/c/g,"s"), / /之间是要替换的内容,g为全局标志
1
2
3
|
为什么要加这一个呢? str.replace(/</g, "<" ).replace(/>/g, ">" ); 因为后端传过来的 <br/> 变成了 <br/> |