这个问题，已经有非常多人说过，而且由来已久。

大家都提供了不少的解决方法，但是都不够彻底。

一）现在是什么情况

1.使用SpringMvc+ModelAndView+jsp传递值

由于业务需要，通过mv向jsp传递值p，之后jsp解析p，其中p是JSON字符串。

这个串在java中没有问题，但是在jsp中使用JSON.parse的时候遇到了问题，这个问题就是经典的转义字符问题

2.在html/jsp中直接定义字面量json字符串的时候，parse问题，情况同第1种

二）如何解决

1.如果是规避，那么有许多种方法，例如放弃mv传值方式，或者java后台处理好，或者避免使用字面量定义json字符串。不过本文不阐释这个。

2.在使用字面量之前，先转换。

本文通过例子来看看第2种的解决方案

三）解决例子





<html>



<head>


    <meta charset="utf-8"> `


    <title>this a simple 特别字符测试</title>


    <style>


        #dDivMain {


            text-align: center;


            margin-left: 20%;


            margin-right: 20%;


            margin-top: 45px;


        }


        


        span {


            word-wrap: break-word;


            word-break: break-all;


            text-align: left;


            display: block;


        }


        


        table {


            width: 100%;


            display: inline-table;


            border-spacing: 0rem;


        }


        


        th {


            background-color: blue;


            color: yellow;


        }


        


        th,


        td {


            border-style: solid;


            border-width: 1px;


            border-color: green;


        }


        


        textarea {


            word-break: break-all;


            word-wrap: break-word;


            overflow-y: scroll;


            width: 50%;


        }


    </style>


</head>



<body>


    <div id="dDivMain">


        <span>js中存在一些异常的字符,这些字符必须使用转义的方式才可以表达


        </span>


        <hr>


        <span>以下是常见的转义字符：</span>


        <table>


            <thead>


                <th>字符</th>


                <th>含义</th>


            </thead>


            <tbody>


                <tr>


                    <td>\'</td>


                    <td>单引号</td>


                </tr>


                <tr>


                    <td>\"</td>


                    <td>双引号</td>


                </tr>


                <tr>


                    <td>\&</td>


                    <td>和号</td>


                </tr>


                <tr>


                    <td>\\</td>


                    <td>反斜杠</td>


                </tr>


                <tr>


                    <td>\n</td>


                    <td>换行</td>


                </tr>


                <tr>


                    <td>\r</td>


                    <td>回车符</td>


                </tr>


                <tr>


                    <td>\t</td>


                    <td>制表符</td>


                </tr>


                <tr>


                    <td>\b</td>


                    <td>退格</td>


                </tr>


                <tr>


                    <td>\f</td>


                    <td>换页</td>


                </tr>


            </tbody>


        </table>


        <span>1)这些转义字符如果是普通应用，那么脚本不会报告错误</span>


        <span>2)但是如果直接书写，用作一些JSON处理，就会异常</span>


        <hr>


        <div>


            <input type="button" value="显示JSON属性-From Server" onclick="getJsonValue()">


            <input type="button" value="显示JSON属性-Local String" onclick="getJsonValueFromLocal()">


            <input type="button" value="显示JSON属性-From Object" onclick="getJsonValueFromObject()">


        </div>


        <div id="dDivContent" style="display: flex;margin-top: 10px;">


            <textarea rows="10" cols="50" id="dTjsonstr"></textarea>


            <textarea rows="10" cols="50" id="dTjsonValue"></textarea>


        </div>


    </div>



</body>


<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->


<script src="jquery-3.6.0.js"></script>


<script>


    function getJsonValue() {


        $.get("http://localhost:9999/map/getJson", function(response) {


            let str = JSON.stringify(response);


            let now = new Date();


            $("#dTjsonstr").val(now + "\najax解析\n" + str);


        });


    }



    function getJsonValueFromLocal() {


        let jstr = '{"address":"中国\"","sex":"\r男\r\n"}';


        //let jstr = '{"address":"中国","phone":"123888&","sex":"男\\r\\n","name":"luzhifei\\t"}';


        jstr = replaceEscapeChar(jstr);


        let jo = JSON.parse(jstr, function(k, v) {


            console.log(k + ":" + v);


            return v;


        });


        let txt = jo.address;


        $("#dTjsonValue").val(txt);


    }



    function getJsonValueFromObject() {


        let jo = {


            name: "luzhifei\t",


            sex: "男\n",


            address: "中国",


            phone: "13333&&"


        }


        let txt = jo.name + jo.sex + jo.address;


        $("#dTjsonValue").val(txt);


    }



    /**


     * @description 最彻底的方法是分解之后替换再合并


     */


    function replaceEscapeChar(sSource) {


        const escapeCharArr = [{


            key: '\"\"',


            value: '\\"\"'


        }, {


            key: '\t',


            value: '\\t'


        }, {


            key: '\n',


            value: '\\n'


        }, {


            key: '\r',


            value: '\\r'


        }, {


            key: '\t',


            value: '\\t'


        }];


        let tmpStr = sSource;


        for (let i = 0, len = escapeCharArr.length; i < len; i++) {


            let arr = tmpStr.split(escapeCharArr[i].key);


            tmpStr = arr.join(escapeCharArr[i].value);


        }


        return tmpStr;


    }


</script>



</html>






运行结果如下图：




这个例子说明了3个问题：


a)使用ajax接受的JSON对象，不存在解析问题


b)如果使用简单的对象定义方式，那么不存在异常字符问题


c)使用mv传递(本例没有示范)和字面量定义json字符串的时候，可以使用替换的方式解决parse问题


例子中有意义的代码如下：




function replaceEscapeChar(sSource) {

        const escapeCharArr = [{

            key: '\"\"',

            value: '\\"\"'

        }, {

            key: '\t',

            value: '\\t'

        }, {

            key: '\n',

            value: '\\n'

        }, {

            key: '\r',

            value: '\\r'

        }, {

            key: '\t',

            value: '\\t'

        }];

        let tmpStr = sSource;

        for (let i = 0, len = escapeCharArr.length; i < len; i++) {

            let arr = tmpStr.split(escapeCharArr[i].key);

            tmpStr = arr.join(escapeCharArr[i].value);

        }

        return tmpStr;

    }




不过我们希望，以后的浏览器升级之后，程序员不用那么辛苦了。


至少不要幸苦大家，而只是小小麻烦下浏览器厂商！
												


											
JS的JSON.parse问题的更多相关文章
	

    
						
  1. JS中JSON.parse和eval的异同
		
    1.相同点 JSON.parse和eval函数都可将一段json字符串转换为json对象,如: var json = '{"intro":[{"name":&q ...
    
		
    2. 
						
  2. JS之JSON.parse和JSON.stringify
		
    这两个函数有兼容性问题, 会报错JSON"未定义 解决方案, 引入json2.js,可以解决浏览器的兼容性 https://link.jianshu.com/?t=https://githu ...
    
		
    3. 
						
  3. js - SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data jquery-1.9.1.min.js:3:4315
		
    FF中时不时报这个错, 就近段做项目来看,  一般是我通过 jquery获取form中的参数(或直接获取参数,并通过ajax进行异步请求的时候,如果有错,就抱该错误! 而对应的, 如果在 Google ...
    
		
    4. 
						
  4. js之json
		
    关于json不了解的,请点击:http://www.json.org/json-zh.html json对象的属性必须要用双引号,值为字符串类型也只能使用双引号,例:{"name" ...
    
		
    5. 
						
  5. 你不知道的JSON.stringify和JSON.parse
		
    json是JavaScript 对象表示法(JavaScript Object Notation),是一种简单的数据格式,类似于XML,其格式为名称/值对,数据用逗号隔开,名称必须用双引号括起来.例如 ...
    
		
    6. 
						
  6. JSON.stringify,JSON.parse方法
		
    var obj={name:'zhangsan',age:'18'};/** js对象--->JSON字符串* JSON.stringify(js对象) --转化为--> JSON字符串* ...
    
		
    7. 
						
  7. arguments.callee 调用函数自身用法----JSON.parse()和JSON.stringify()前端js数据转换json格式
		
    arguments.callee 调用函数自身用法 arguments.callee 在哪一个函数中运行,它就代表哪个函数. 一般用在匿名函数中. 在匿名函数中有时会需要自己调用自己,但是由于是匿名函 ...
    
		
    8. 
						
  8. Js中JSON.stringify()与JSON.parse()与eval()详解及使用案例
		
    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.因为采用独立于语言的文本格式,也使用了类似于C语言家族的习惯,拥有了这些特性使使JSON称为理想的数据交换语 ...
    
		
    9. 
						
  9. js数组使用JSON.stringify()和toString()的区别，JSON.parse
		
    JSON.stringify()中的<br><br>var arr = [1,2,3,4]; console.log(arr.toString()); // 1,2,3,4 a ...
    
		
    10. 
						
  10. JSON.parse   的用法，在js中用的。也是反序列化用法。
		
    参数 text 必需. 一个有效的 JSON 字符串. reviver 可选. 一个转换结果的函数. 将为对象的每个成员调用此函数. 如果成员包含嵌套对象,则先于父对象转换嵌套对象. 对于每个成员,会 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 安全机密管理：Asp.Net Core中的本地敏感数据保护技巧
			
    前言 在我们开发过程中基本上不可或缺的用到一些敏感机密数据,比如SQL服务器的连接串或者是OAuth2的Secret等,这些敏感数据在代码中是不太安全的,我们不应该在源代码中存储密码和其他的敏感数据, ...
    
			
    2. 
						
  2. games101-3 BRDF101
			
    BRDF101 概述 本文基于知乎Maple对brdf的文章,在此基础又收集了一些其它来源的关于brdf的文章,希望能够完全理解记忆相关知识 关于Jakub Boksansky的文章,看的过程中又去搜 ...
    
			
    3. 
						
  3. OSI模型之数据链路层
			
    一.简介 数据链路层在物理层提供服务的基础上向网络层提供服务,其最基本的服务是将源自网络层的数据可靠地传输到相邻节点的目标机网络层.其主要作用是加强物理层传输原始比特流的功能,将物理层提供的可能出错的 ...
    
			
    4. 
						
  4. Docker的Portainer认识、安装、使用
			
    一.认识 docker的图形化界面 Portainer 是一个轻量级的容器管理界面,可以让用户更轻松地管理 Docker 容器.镜像.网络和数据卷等.Portainer 提供了一个用户友好的 Web  ...
    
			
    5. 
						
  5. 《最新出炉》系列入门篇-Python+Playwright自动化测试-43-分页测试
			
    1.简介 分页测试,这种一般都是公共的方法系统中都写好了,这种一般出现是数据展示比较多的时候,会采取分页的方法,而且比较固定,一般是没有问题的,因此它非常适合自动化测试,但是如何使用playwrigh ...
    
			
    6. 
						
  6. Ubuntu虚拟机ROS的安装与使用
			
    ROS安装 直达链接 安装ROS2 使用鱼香ROS的一键安装: wget http://fishros.com/install -O fishros && bash fishros 进 ...
    
			
    7. 
						
  7. [BZOJ4358]permu线段树+莫队
			
    先放代码 晚上补(争取) [BZOJ4358]permu 线段树+莫队做法 序列操作,多次询问,无修,标准的莫队. 在如何在不同区间内转移的问题上,我选择用线段树来维护(没听xfg讲回滚莫队不行啊)  ...
    
			
    8. 
						
  8. FFmpeg开发笔记（二十）Linux环境给FFmpeg集成AVS3解码器
			
    ​AVS3是中国AVS工作组制定的第三代音视频编解码技术标准,也是全球首个已推出的面向8K及5G产业应用的视频编码标准.AVS工作组于2019年3月9日完成第三代AVS视频标准(AVS3)基准档次的制 ...
    
			
    9. 
						
  9. 解锁高效创新：IPD策略如何重塑产品开发流程
			
    IPD(集成产品开发)涵盖了产品从创意提出到研发.生产.运营等,包含了产品开发到营销运营的整个过程.围绕产品(或项目)生命周期的过程的管理模式,是一套生产流程,更是时下国际先进的管理体系.IPD(集成 ...
    
			
    10. 
						
  10. Vue3:Cannot read properties of null (reading 'isCE')
			
    Cannot read properties of null (reading 'isCE')   这个问题是在vue3中引入elementui的列表框时出现的.经过网上查询,有说是装了两个vue版本 ...
    
			
    11.