JS代码实现Json和Xml的格式化

大家好，欢迎来到IT知识分享网。

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

输出样例：