2015年12月 – 程序猿&程序媛

JSON并不完全是JavaScript的子集，它们对部分字符处理不同。

业务方提出的BUG，某位用户总是无法正常使用系统，初步诊断为接口JSON解析失败。

进一步检查发现，该接口返回数据：
正常情况下，“Response Headers”中“Content-Type”为“application/json; charset=utf-8
”，Chrome开发工具中“Response Body Preview”为JSON对象。
异常情况下，“Response Headers”中“Content-Type”为“application/json; charset=utf-8
”，Chrome开发工具中“Response Body Preview”为JSON字符串。

而“Response Body”初看起来，一切正常。仔细一看才发现，原来其中混入了一个控制字符“ESC”（Unicode编码为\u001b），现代浏览器（IE9-11、Chrome、Firefox）不可正常识别数据格式（IE8反而可以识别），造成JSON解析失败，进而触发Ajax的error回调。如图所示：

查询相关资料，发现之前对于JSON的理解有些狭隘，原来JSON并不完全是JavaScript的子集。
mozilla说明：

现代浏览器测试：

var code_1 = '"\u2028\u2029"';
JSON.parse(code_1); // 正常
eval(code_1); // 异常

var code_2 = '"\u001b"';
JSON.parse(code_2); // 异常
eval(code_2); // 正常

var code_1 = '"\u2028\u2029"';

JSON.parse(code_1); // 正常

eval(code_1); // 异常

var code_2 = '"\u001b"';

JSON.parse(code_2); // 异常

eval(code_2); // 正常

由此可知，需要对用户输入进行过滤。对于部分字符进行预处理，避免浏览器无法解析接口返回数据。
写了一个处理函数：

//过滤字符串中特殊字符，避免破坏JSON结构。
var stringJsonFilter = function(source, hideCode){
	/*
	 * 参考资料：
	 * http://blog.codemonkey.cn/archives/437
	 */
	var toString = Object.prototype.toString;
	var isArray = Array.isArray || function(a) {
		return toString.call(a) === '[object Array]';
	};
	var escMap = {
		'"': '\\"',
		'\\': '\\\\',
		'\b': '\\b',
		'\f': '\\f',
		'\n': '\\n',
		'\r': '\\r',
		'\t': '\\t'
	};
	var escFunc = function(m) {
		var value = escMap[m];
		if(value){
			//后台可正常处理这些字符，故而不再处理。
			//return value;
			return m;
		}
		else if(hideCode){
			return " "; //用空格占位
		}
		else{
		  return '\\u' + (m.charCodeAt(0) + 0x10000).toString(16).substring(1);
		}
	};
	var escRE = /[\\"\u0000-\u001F\u2028\u2029]/g;

	//只处理字符串类型
	if (typeof(source) != "string") {
		return source;
	} else {
		var target = source.replace(escRE, escFunc);
		return target;
	}
};

//过滤字符串中特殊字符，避免破坏JSON结构。

var stringJsonFilter = function(source, hideCode){

* 参考资料：

* http://blog.codemonkey.cn/archives/437

var toString = Object.prototype.toString;

var isArray = Array.isArray || function(a) {

return toString.call(a) === '[object Array]';

};

var escMap = {

'"': '\\"',

'\\': '\\\\',

'\b': '\\b',

'\f': '\\f',

'\n': '\\n',

'\r': '\\r',

'\t': '\\t'

};

var escFunc = function(m) {

var value = escMap[m];

if(value){

//后台可正常处理这些字符，故而不再处理。

//return value;

return m;

}

else if(hideCode){

return " "; //用空格占位

}

else{

return '\\u' + (m.charCodeAt(0) + 0x10000).toString(16).substring(1);

}

};

var escRE = /[\\"\u0000-\u001F\u2028\u2029]/g;

//只处理字符串类型

if (typeof(source) != "string") {

return source;

} else {

var target = source.replace(escRE, escFunc);

return target;

}

};

参考资料：
介绍 JSON
http://www.json.org/json-zh.html
JSON
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON
JSON: The JavaScript subset that isn’t
http://www.timelessrepo.com/json-isnt-a-javascript-subset

IE8与近代（IE9至IE11）及现代（Chrome和Firefox）浏览器，对于\r和\n的处理方式不同。

需求：对于textarea中输入的换行，要在页面中表现出来。
方案：输入内容在展示时，通过将\r和\n替换为标签，代码如下：

//输入内容
var content = "1\"2\\3\b4\f5\n6\r7\t8";
//安全过滤
var div = document.createElement("div");
var text = document.createTextNode(content);
div.appendChild(text);
var html = div.innerHTML;
//正则替换
var reg = /(\r\n)|(\n)/g;
html.replace(reg, "<br/>");

//输入内容

var content = "1\"2\\3\b4\f5\n6\r7\t8";

//安全过滤

var div = document.createElement("div");

var text = document.createTextNode(content);

div.appendChild(text);

var html = div.innerHTML;

//正则替换

var reg = /(\r\n)|(\n)/g;

html.replace(reg, "<br/>");

以上代码，在IE9-11、Chrome、Firefox中运行良好，但在IE8下无效。
调试后发现，原来IE8中通过innerHTML拿出的字符串，被移除了\r和\n。

参考资料：
Document.createElement()
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElement
element.innerHTML
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML
Node.nodeValue
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeValue
Node.textContent
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent

使用Java对图片进行裁剪，裁减后出现偏色现象。

关键词：
Java 图片照片裁剪剪切缩放偏色失真变形

先上结论：
对原始图片进行裁剪操作，一切正常。对上传后的文件进行裁剪，出现偏色现象。调节各种裁剪参数，更换多种裁剪方式，均不奏效。
最后发现，原始图片和上传后的图片，虽然直接打开后视觉效果表现一致，但文件大小变小了。进一步检查发现，图片中的大部分EXIF信息丢失，只剩下最基本的信息。
在上传图片的过程中，使用了集团封装的类库，对文件内容进行安全过滤。我们并不清楚过滤的具体细节，结果由于过度信任而浪费了大量时间。
猜测java的图形处理类库，需要依赖较多的EXIF信息，对此种文件兼容性较差。由于时间原因，未深入探寻。如以后找到更多信息，再回来进行补充。

再来吐槽：
百度和google了很久，相关信息很少，stackoverflow中也没找到相关问题。只找到很久之前两个没有答案的问题，也不知道这两位题主最后有没有找到解决方案。
http://www.oschina.net/question/190011_85557
http://zhidao.baidu.com/link?url=-1-_iQBsBuLzeuadYWGNXjVuQUIXqc4P07veaTKoJHDytJmmbhqE5a6pb108Bn2HBY6F7IjOjJ-5JLQgsiaHsshA4oNNKJZbq4M5w1hRH-i

最后看图：
原始图片

原始图片EXIF信息

安全过滤后图片

安全过滤后图片的EXIF信息

裁剪后偏色图片

裁剪后偏色图片的EXIF信息