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

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

一）现在是什么情况

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. dotnet OpenXML 继承组合颜色的 GrpFill 属性
			
    在 OpenXML 的颜色画刷填充,有特殊的填充是 GrpFill 属性,对应 OpenXML SDK 定义的 DocumentFormat.OpenXml.Drawing.GroupFill 类型  ...
    
			
    2. 
						
  2. kubeadm搭建单master多node节点的k8s集群(3)
			
    一.实验环境准备 K8s集群角色 IP 主机名 安装的组件 配置 控制节点 192.168.1.10 master apiserver.controller-manager.scheduler.etc ...
    
			
    3. 
						
  3. 探索 DTD 在 XML 中的作用及解析：深入理解文档类型定义
			
    DTD 是文档类型定义(Document Type Definition)的缩写.DTD 定义了 XML 文档的结构以及合法的元素和属性. 为什么使用 DTD 通过使用 DTD,独立的团体可以就数据交 ...
    
			
    4. 
						
  4. ChatGPT开源项目精选合集
			
    大家好,我是 Java陈序员. 2023年,ChatGPT 的爆火无疑是最值得关注的事件之一,AI对话.AI绘图等工具层出不穷. 今天给大家介绍几个 ChatGPT 的开源项目! 关注微信公众号:[J ...
    
			
    5. 
						
  5. Spring环境获取Spring的Bean
			
    一.测试数据准备 /* Navicat Premium Data Transfer Source Server : swp-mysql Source Server Type : MySQL Sourc ...
    
			
    6. 
						
  6. three.js教程7-PBR材质与环境贴图CubeTextureLoader
			
    1.PBR材质 PBR是基于物理的渲染(physically-based rendering).模拟物体表面的反射算法. Three.js提供了两个PBR材质相关的类MeshStandardMater ...
    
			
    7. 
						
  7. JDK源码阅读-------自学笔记(二十)(java.util.List初探)
			
    List简介 List是有序.可重复的容器. 有序:List中每个元素都有索引标记.可以根据元素的索引标记(在List中的位置)访问元素,从而精确控制这些元素. 可重复:List允许加入重复的元素.更 ...
    
			
    8. 
						
  8. WPF自定义FixedColumnGrid布局控件
			
    按照上一节所讲,我已经对布局系统又所了解.接下来我就实现一个布局控件FixedColumnGrid. 1.基础版 布局控件机制如下,FixedColumnGrid将子控件按照水平排列,每行满两列后换行 ...
    
			
    9. 
						
  9. 在 Inno Setup iss 打包过程 中检测 .NET 6 / .net 5 / .NET Core 运行环境是否存在或已安装
			
    为了将 .NET 5 / .NET Core 应用程序部署到客户机,我们可以编写 Inno Setup 代码来判断客户机是否安装了必要的运行环境..NET 官方仓库 中提供了一个名为 NetCoreC ...
    
			
    10. 
						
  10. 001. git基础
			
    目录 1. 持续集成教程 1.1 持续集成的基础概念 1.2 持续集成的一般流程 1.3 认识DevOps 1.3.1 DevOps是啥? 1.3.2 为什么需要DevOps呢? 1.3.3 DevO ...
    
			
    11.