Json数据中的特殊字符处理

Posted 2020-08-26 web前段领域

今天在项目中遇到一个问题，页面上的数据突然显示不出来了，查验后得知是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(/&lt;/g, "<").replace(/&gt;/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(/&lt;/g, "<").replace(/&gt;/g,">"); 因为后端传过来的    <br/>    变成了 &lt;br/&gt;