四时宝库

我们生产开发过程中，经常遇到json和xml的显示问题，比如

接口返回的数据内容，是压缩的json格式，不好清晰查看。

网上也有不少类似的在线工具，这里，我整理了关键的实现代码

1、Json的格式化和压缩：

// Json的格式化和压缩 //
function execFormatJson(txt, compress) {
	// txt:json的字符串内容
	// compress:是否压缩
	// false:格式化
	// true:压缩显示

	// 格式化需要的间隔 //
	let indentChar = '    ';
	if (/^\s*$/.test(txt)) {
		alert('数据为空,无法格式化! ');
		return;
	}

	let data = null;
	try {
		data = eval('(' + txt + ')');
	} catch (e) {
		alert('数据源语法错误,格式化失败! 错误信息: ' + e.description, 'err');
		return;
	}

	// 绘制最近结果 //
	let draw = [];
	let last = false;
	let line = compress ? '' : '\n';
	let nodeCount = 0;
	// 最深的层次 //
	let maxDepth = 0;

	let notify = function(name, value, isLast, indent, formObj) {
		// name:节点名 //
		// value:节点值 //
		// isLast:是否最后节点 //
		// indent:缩进次数 //
		// formObj:是否object项 //

		// 节点计数
		++nodeCount;
		let tabIndex = 0
		let tab = '';

		if (compress) {
			tab = '';
		} else {
			for (tabIndex = 0; tabIndex < indent; ++tabIndex) {
				// 缩进HTML //
				tab += indentChar;
			}
		}
		// 缩进递增并记录 //
		++indent;
		maxDepth = indent;
		if (value && value.constructor == Array) {
			// 处理数组 //
			// 缩进'[' 然后换行 //
			draw.push(tab + (formObj ? ('"' + name + '":') : '') + '[' + line);
			let valueArrayIndex = 0;
			let valueArrayIsLast = false;
			for (valueArrayIndex = 0; valueArrayIndex < value.length; ++valueArrayIndex) {
				valueArrayIsLast = false;
				if (valueArrayIndex == value.length - 1) {
					valueArrayIsLast = true;
				}
				notify(valueArrayIndex, value[valueArrayIndex], valueArrayIsLast, indent, false);
			}
			// 缩进']'换行,若非尾元素则添加逗号 //
			draw.push(tab + ']' + (isLast ? line : (',' + line)));
		} else if (value && typeof value == 'object') {
			// 处理对象 //
			// 缩进'{' 然后换行 //
			draw.push(tab + (formObj ? ('"' + name + '":') : '') + '{' + line);
			// 节点个数 //
			let keyLen = 0;
			let valueIndex = 0;
			for (let key in value) {
				++keyLen;
			}
			let valueIsLast = false;
			for (let key in value) {
				if (valueIndex == keyLen - 1) {
					valueIsLast = true;
				} else {
					valueIsLast = false;
				}
				++valueIndex;

				notify(key, value[key], valueIsLast, indent, true);
			}
			// 缩进'}'换行,若非尾元素则添加逗号 //
			draw.push(tab + '}' + (isLast ? line : (',' + line)));
		} else {
			if (typeof value == 'string') {
				value = '"' + value + '"';
			}
			draw.push(tab + (formObj ? ('"' + name + '":') : '') + value + (isLast ? '' : ',') + line);
		};
	};
	let isLast = true;
	let indent = 0;
	notify('', data, isLast, indent, false);
	return draw.join('');
}

2、xml的格式化

// xml 格式化 //
function execFormatXml(xml) {
    let formatted = '';
    let reg = /(>)(<)(\/*)/g;
    xml = xml.replace(reg, '$1\r\n$2$3');
    let pad = 0;
    jQuery.each(xml.split('\r\n'), function (index, node) {
        let indent = 0;
        if (node.match(/.+<\/\w[^>]*>$/)) {
            indent = 0;
        } else if (node.match(/^<\/\w/)) {
            if (pad != 0) {
                pad -= 1;
            }
        } else if (node.match(/^<\w[^>]*[^\/]>.*$/)) {
            indent = 1;
        } else {
            indent = 0;
        }
        let padding = '';
		let padIndex = 0;
        for (padIndex = 0; padIndex < pad; ++padIndex) {
            padding += '  ';
        }
        formatted += padding + node + '\r\n';
        pad += indent;
    });
    return formatted;
}

调用示例：

function onOkClick() {
	let oper = $("#ddl_oper").val();
	let input = $("#txt_input").val();
	let result = null;

	switch (oper) {
		case "json.formatter":
			// json的格式化 //
			result = execFormatJson(input, false);
			break;
		case "json.compress":
			// json的压缩 //
			result = execFormatJson(input, true);
			break;
		case "xml.formatter":
			// xml的格式化 //
			result = execFormatXml(input, true);
			break;
		default:
			theResult = "未知：" + oper;
			break;
	}


	$("#txt_result").val(result);
	$("#span_execTime").html(webUtil.dateFn.showDateTimeNow());
}

输出样例：