• Json数据中的特殊字符处理


    今天在项目中遇到一个问题,页面上的数据突然显示不出来了,查验后得知是Json数据出现了问题。使用JSON从后台向前台传输数据的时候,当数据本身含有一些特殊字符,会导致JSON数据的解析出错。如果内容中本身就包含了 """ 双引号、" " 回车换行这时候,数据的解析就会出现问题。

    , , 的区别

    1
    2
    3
    4
    是换行,英文是New line,表示使光标到行首
    是回车,英文是Carriage return,表示使光标下移一格
     
    表示回车换行

    " "与"</br>"的区别 

    1
    2
    是输出的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" }
    ]
    }

      

    不改动数据数据,怎样才能把数据传到页面上去呢。思路是后端把 (回车)转成<br/>再,前端再把<br/>转回

    C# 代码:

    1 public static string EncodeTextareaChar(string str)
    2         {
    3             if (str == null) return null;
    4             return str.Replace(""", "\"").Replace("
    ", "<br/>").Replace("
    ", "<br/>").Replace("
    ", "<br/>");
    5         }

    Javascript代码

    1 function encodeTextarea(str) {
    2         str = str.replace(/&lt;/g, "<").replace(/&gt;/g,">");
    3         var str = str.replace(/<br/>/g, "
    ");
    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;
  • 相关阅读:
    Remove Element leetcode java
    Remove Duplicates from Sorted Array leetcode java
    Container With Most Water leetcode java
    Divide Two Integers leetcode java
    N-Queens II leetcode java
    N-Queens leetcode java
    Pow(x,n) leetcode java
    Single Number II leetcode java
    Single Number leetcode java
    ROS第一次开网站跳转到公告页(任意地址跳转)方法
  • 原文地址:https://www.cnblogs.com/zhangxinerfenxiang/p/6256510.html
Copyright © 2020-2023  润新知