JS的JSON.parse问题
这个问题，已经有非常多人说过，而且由来已久。
大家都提供了不少的解决方法，但是都不够彻底。
一）现在是什么情况
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; }
不过我们希望，以后的浏览器升级之后，程序员不用那么辛苦了。
至少不要幸苦大家，而只是小小麻烦下浏览器厂商！
