我们生产开发过程中，经常遇到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());}

输出样例：