1、前端需求说明
因为前端有时会展示一些json的代码格式，或者处理json变为javascript对象，因此在这里整理一些方法对json数据格式进行处理。
2、JSON转对象
1.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>json_format</title>
</head>
<body>
<script>
var json_data = eval(
{
"caller": "web",
"callee": "lb_controller",
"event_id": "27",
"error_code": 200,
"error_msg": "",
"response_data": [{
"vs_status": "enable",
"vs_name": "vs_nrs-nginx-core_https443_CMRH-PRD-CORE",
"partition": "RH-Base",
"dc_chn": "sk",
"lb_chn": "f5",
"proto": "https",
"type": "standard",
"ip": "111.222.123.122",
"port": "443",
"http_profile": "http_XFF",
"ssl_cert": "cc.com.cert",
"redirect_https": "0",
"name": "nrs-nginx-core_https443_CMRH-PRD-CORE",
"status": "enable",
"member": [
{ "ip": "111.222.123.123", "port": "80", "status": "enable" },
{ "ip": "111.111.124.124", "port": "80", "status": "enable" }
],
"lb_method": "round",
"persistence": "cookie",
"heatlh_check": "/Common/tcp",
"irule": { "name": "/Common/irule_redirectHTTPS", "content": "" }
}]
})
function objTostring(o) {
var r = [];
if (typeof o == "string") {
return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
}
if (typeof o == "object") {
if (!o.sort) {
for (var i in o) {
r.push(i + ":" + obj2string(o[i]));
}
if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
r.push("toString:" + o.toString.toString());
}
r = "{" + r.join() + "}";
} else {
for (var i = 0; i < o.length; i++) {
r.push(obj2string(o[i]))
}
r = "[" + r.join() + "]";
}
return r;
}
return o.toString();
}
document.write(objTostring(json_data))
</script>
</body>
</html>
2.效果
3、JSON数据格式化
1.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var json_data = '{"caller":"web","callee":"lb_controller","event_id":"27","error_code":200,"error_msg":"","response_data":[{"vs_status":"enable","vs_name":"vs_nrs-nginx-core_https443_CMRH-PRD-CORE","partition":"RH-Base","dc_chn":"sk","lb_chn":"f5","proto":"https","type":"standard","ip":"111.222.123.122","port":"443","http_profile":"http_XFF","ssl_cert":"cc.com.cert","redirect_https":"0","name":"nrs-nginx-core_https443_CMRH-PRD-CORE","status":"enable","member":[{"ip":"111.222.123.123","port":"80","status":"enable"},{"ip":"111.111.124.124","port":"80","status":"enable"}],"lb_method":"round","persistence":"cookie","heatlh_check":"/Common/tcp","irule":{"name":"/Common/irule_redirectHTTPS","content":""}}]}'
function transitionJsonToString(jsonObj, callback) {
// 转换后的jsonObj受体对象
var _jsonObj = null;
// 判断传入的jsonObj对象是不是字符串，如果是字符串需要先转换为对象，再转换为字符串，这样做是为了保证转换后的字符串为双引号
if (Object.prototype.toString.call(jsonObj) !== '[object String]') {
try {
_jsonObj = JSON.stringify(jsonObj);
} catch (error) {
// 转换失败错误信息
console.error('您传递的json数据格式有误，请核对...');
console.error(error);
callback(error);
}
} else {
try {
jsonObj = jsonObj.replace(/(\')/g, '"');
_jsonObj = JSON.stringify(JSON.parse(jsonObj));
} catch (error) {
// 转换失败错误信息
console.error('您传递的json数据格式有误，请核对...');
console.error(error);
callback(error);
}
}
return _jsonObj;
}
function formatJson(jsonObj, callback) {
// 正则表达式匹配规则变量
var reg = null;
// 转换后的字符串变量
var formatted = '';
// 换行缩进位数
var pad = 0;
// 一个tab对应空格位数
var PADDING = ' ';
// json对象转换为字符串变量
var jsonString = transitionJsonToString(jsonObj, callback);
if (!jsonString) {
return jsonString;
}
// 存储需要特殊处理的字符串段
var _index = [];
// 存储需要特殊处理的“再数组中的开始位置变量索引
var _indexStart = null;
// 存储需要特殊处理的“再数组中的结束位置变量索引
var _indexEnd = null;
// 将jsonString字符串内容通过\r\n符分割成数组
var jsonArray = [];
// 正则匹配到{,}符号则在两边添加回车换行
jsonString = jsonString.replace(/([\{\}])/g, '\r\n$1\r\n');
// 正则匹配到[,]符号则在两边添加回车换行
jsonString = jsonString.replace(/([\[\]])/g, '\r\n$1\r\n');
// 正则匹配到,符号则在两边添加回车换行
jsonString = jsonString.replace(/(\,)/g, '$1\r\n');
// 正则匹配到要超过一行的换行需要改为一行
jsonString = jsonString.replace(/(\r\n\r\n)/g, '\r\n');
// 正则匹配到单独处于一行的,符号时需要去掉换行，将,置于同行
jsonString = jsonString.replace(/\r\n\,/g, ',');
// 特殊处理双引号中的内容
jsonArray = jsonString.split('\r\n');
jsonArray.forEach(function (node, index) {
// 获取当前字符串段中"的数量
var num = node.match(/\"/g) ? node.match(/\"/g).length : 0;
// 判断num是否为奇数来确定是否需要特殊处理
if (num % 2 && !_indexStart) {
_indexStart = index;
}
if (num % 2 && _indexStart && _indexStart != index) {
_indexEnd = index;
}
// 将需要特殊处理的字符串段的其实位置和结束位置信息存入，并对应重置开始时和结束变量
if (_indexStart && _indexEnd) {
_index.push({
start: _indexStart,
end: _indexEnd,
});
_indexStart = null;
_indexEnd = null;
}
});
// 开始处理双引号中的内容，将多余的"去除
_index.reverse().forEach(function (item, index) {
var newArray = jsonArray.slice(item.start, item.end + 1);
jsonArray.splice(
item.start,
item.end + 1 - item.start,
newArray.join('')
);
});
// 奖处理后的数组通过\r\n连接符重组为字符串
jsonString = jsonArray.join('\r\n');
// 将匹配到:后为回车换行加大括号替换为冒号加大括号
jsonString = jsonString.replace(/\:\r\n\{/g, ':{');
// 将匹配到:后为回车换行加中括号替换为冒号加中括号
jsonString = jsonString.replace(/\:\r\n\[/g, ':[');
// 将上述转换后的字符串再次以\r\n分割成数组
jsonArray = jsonString.split('\r\n');
// 将转换完成的字符串根据PADDING值来组合成最终的形态
jsonArray.forEach(function (item, index) {
// console.log(item);
var i = 0;
// 表示缩进的位数，以tab作为计数单位
var indent = 0;
// 表示缩进的位数，以空格作为计数单位
var padding = '';
if (item.match(/\{$/) || item.match(/\[$/)) {
// 匹配到以{和[结尾的时候indent加1
indent += 1;
} else if (
item.match(/\}$/) ||
item.match(/\]$/) ||
item.match(/\},$/) ||
item.match(/\],$/)
) {
// 匹配到以}和]结尾的时候indent减1
if (pad !== 0) {
pad -= 1;
}
} else {
indent = 0;
}
for (i = 0; i < pad; i++) {
padding += PADDING;
}
formatted += padding + item + '<br />';
pad += indent;
});
// 返回的数据需要去除两边的空格
return formatted.trim();
}
document.write(formatJson(json_data))
</script>
</body>
</html>
2.效果
扫一扫
435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
