原生js格式化json和格式化xml的方法
在工作中一直看各位前辈的博客解决各种问题，对我的帮助很大，非常感谢！ 之前一直比较忙没有写博客，终于过年有了点空闲时间，可以把自己积累的东西分享下，笔记中的部分函数不是自己写的，都是工作中一点点积累的，由于时间已久比较零散找不到对应的主人了，没法注明出处还请见谅。我们经常遇到从后代拿到的没有格式化的json和xml，需要格式化好了以后显示在页面上，这篇文章希望可以让您更加方便的实现这个需求。本文的代码使用原生方式编写，不需要引用其他插件，可以在传统项目和自动化项目中直接使用。为了方便测试，我整理了下，只要建一个空的html,将所有的代码copy进去，本地打开就可以查看效果。做好的html在GitHub上也放了一份,以后有时间就会将自己整理的笔记放到上面,地址如下: https://github.com/binginsist/binginsistNote
格式化json实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js格式化json的方法</title>
</head>
<body>
<!--格式化后的json写入的位置-->
<div id="writePlace"></div>
<script>
//格式化代码函数,已经用原生方式写好了不需要改动,直接引用就好
var formatJson = function (json, options) {
var reg = null,
formatted = '',
pad = 0,
PADDING = ' ';
options = options || {};
options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
if (typeof json !== 'string') {
json = JSON.stringify(json);
} else {
json = JSON.parse(json);
json = JSON.stringify(json);
}
reg = /([\{\}])/g;
json = json.replace(reg, '\r\n$1\r\n');
reg = /([\[\]])/g;
json = json.replace(reg, '\r\n$1\r\n');
reg = /(\,)/g;
json = json.replace(reg, '$1\r\n');
reg = /(\r\n\r\n)/g;
json = json.replace(reg, '\r\n');
reg = /\r\n\,/g;
json = json.replace(reg, ',');
if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
reg = /\:\r\n\{/g;
json = json.replace(reg, ':{');
reg = /\:\r\n\[/g;
json = json.replace(reg, ':[');
}
if (options.spaceAfterColon) {
reg = /\:/g;
json = json.replace(reg, ':');
}
(json.split('\r\n')).forEach(function (node, index) {
var i = 0,
indent = 0,
padding = ''; if (node.match(/\{$/) || node.match(/\[$/)) {
indent = 1;
} else if (node.match(/\}/) || node.match(/\]/)) {
if (pad !== 0) {
pad -= 1;
}
} else {
indent = 0;
} for (i = 0; i < pad; i++) {
padding += PADDING;
} formatted += padding + node + '\r\n';
pad += indent;
}
);
return formatted;
};
//引用示例部分
//(1)创建json格式或者从后台拿到对应的json格式
var originalJson = {"name": "binginsist", "sex": "男", "age": "25"};
//(2)调用formatJson函数,将json格式进行格式化
var resultJson = formatJson(originalJson);
//(3)将格式化好后的json写入页面中
document.getElementById("writePlace").innerHTML = '<pre>' +resultJson + '<pre/>';
</script>
</body>
</html>
格式化xml实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js格式化xml的方法</title>
</head>
<body>
<!--格式化后的xml写入的位置-->
<div id="writePlace"></div>
<script>
//格式化代码函数,已经用原生方式写好了不需要改动,直接引用就好
String.prototype.removeLineEnd = function () {
return this.replace(/(<.+?\s+?)(?:\n\s*?(.+?=".*?"))/g, '$1 $2')
}
function formatXml(text) {
//去掉多余的空格
text = '\n' + text.replace(/(<\w+)(\s.*?>)/g, function ($0, name, props) {
return name + ' ' + props.replace(/\s+(\w+=)/g, " $1");
}).replace(/>\s*?</g, ">\n<"); //把注释编码
text = text.replace(/\n/g, '\r').replace(/<!--(.+?)-->/g, function ($0, text) {
var ret = '<!--' + escape(text) + '-->';
//alert(ret);
return ret;
}).replace(/\r/g, '\n'); //调整格式
var rgx = /\n(<(([^\?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/mg;
var nodeStack = [];
var output = text.replace(rgx, function ($0, all, name, isBegin, isCloseFull1, isCloseFull2, isFull1, isFull2) {
var isClosed = (isCloseFull1 == '/') || (isCloseFull2 == '/' ) || (isFull1 == '/') || (isFull2 == '/');
//alert([all,isClosed].join('='));
var prefix = '';
if (isBegin == '!') {
prefix = getPrefix(nodeStack.length);
}
else {
if (isBegin != '/') {
prefix = getPrefix(nodeStack.length);
if (!isClosed) {
nodeStack.push(name);
}
}
else {
nodeStack.pop();
prefix = getPrefix(nodeStack.length);
} }
var ret = '\n' + prefix + all;
return ret;
}); var prefixSpace = -1;
var outputText = output.substring(1);
//alert(outputText); //把注释还原并解码，调格式
outputText = outputText.replace(/\n/g, '\r').replace(/(\s*)<!--(.+?)-->/g, function ($0, prefix, text) {
//alert(['[',prefix,']=',prefix.length].join(''));
if (prefix.charAt(0) == '\r')
prefix = prefix.substring(1);
text = unescape(text).replace(/\r/g, '\n');
var ret = '\n' + prefix + '<!--' + text.replace(/^\s*/mg, prefix) + '-->';
//alert(ret);
return ret;
}); return outputText.replace(/\s+$/g, '').replace(/\r/g, '\r\n');
}
function getPrefix(prefixIndex) {
var span = ' ';
var output = [];
for (var i = 0; i < prefixIndex; ++i) {
output.push(span);
} return output.join('');
} //引用示例部分
//(1)创建xml格式或者从后台拿到对应的xml格式
var originalXml = '<?xml version="1.0"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Dont forget me this weekend!</body> </note>';
//(2)调用formatXml函数,将xml格式进行格式化
var resultXml = formatXml(originalXml);
//(3)将格式化好后的formatXml写入页面中
document.getElementById("writePlace").innerHTML = '<pre>' +resultXml + '<pre/>';
</script>
</body>
</html>
原生js格式化json和格式化xml的方法的更多相关文章
- 初探原生js根据json数据动态创建table
初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...
- 基于原生JS封装数组原型上的sort方法
基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...
- 原生js事件委托（事件代理）方法扩展
原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param ...
- 原生JS：JSON对象详解
JSON对象 支持到IE8,旧版的IE需要Polyfill 本文参考MDN做的详细整理,方便大家参考[MDN](https://developer.mozilla.org/zh-CN/docs/Web ...
- 原生js 遍历文件夹分析xml并保存
其实这种功能,网上相关的代码多的是,我也是因为今天正好要用到这个功能,所以临时写了下,放这里保存下,以便将来自己或者别人用的上吧. 当然我写的是一个hta文件.下面是完整js代码,都是调用active ...
- AJAX Form Submit Framework 原生js post json
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest <!doctype ht ...
- JS中json数组多字段排序方法（解决兼容性问题）(转)
前端对一个json数组进行排序,用户需要动态的根据自己的选择来对json数据进行排序. 由于后台表设计问题所以不能用sql进行排序,这里用到了js的sort方法. 如果对单字段排序,那么很简单,一个s ...
- 使用原生js模拟jQuery选择器，实现new方法，兼容ie5
// 考虑到兼容ie5,未使用es6语法 /* 使用方法: 在<head>标签中(需使用ready方法): <script src="./jQuery2.js"& ...
- js操作json添加元素和数据的方法
function addServerUrlToJson() { var json_tem = [{"name":"a","value":1} ...
随机推荐
- 激活navicat premium12
按Win键和R键打开运行并输入cmd并回车或Win10 开始菜单右键,打开命令提示符或者命令提示符(管理员) ,建议使用命令提示符(管理员) 最为稳妥. 1.首先使用cd命令切换到当前Navicat ...
- [BZOJ3033]:太鼓达人（爆搜）
题目传送门 题目描述 七夕祭上,Vani牵着cl的手,在明亮的灯光和欢乐的气氛中愉快地穿行.这时,在前面忽然出现了一台太鼓达人机台,而在机台前坐着的是刚刚被精英队伍成员XLk.Poet_shy和lyd ...
- kubernetes配置dashborad，web界面
一,将kubernetes-dashboard.yaml-1.10和admin-rbac.yaml和token.sh的上传到k8s的计算机上 .如图 二,切入到这三个文件所在的目录下,执行命令:kub ...
- 20175308 实验三《敏捷开发与XP实践》
20175308 实验三<敏捷开发与XP实践> 实验要求 没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器> 课程 完成实验.撰写实验 ...
- Android MQTT的发布与订阅
一.MQTT介绍 链接1(菜鸟教程):https://www.runoob.com/w3cnote/mqtt-intro.html 连接2(MQTT中文网):http://mqtt.p2hp.com/ ...
- TiDB单机安装测试
TiDB单机安装测试 CentOS7.3安装MySQL5.6 1:下载TiDB安装包# cd /opt/source# wget http://download.pingcap.org/tidb-la ...
- leetcode 56. Merge Intervals 、57. Insert Interval
56. Merge Intervals是一个无序的,需要将整体合并:57. Insert Interval是一个本身有序的且已经合并好的,需要将新的插入进这个已经合并好的然后合并成新的. 56. Me ...
- lua 十进制转二进制
-- Converts a byte to a string of 0s and 1s. function byte2bin(n) local t = {} for i=7,0,-1 do t[#t+ ...
- 使用 go protoc --go_out 输出的 *.pb.go文件时报 undefined: proto.ProtoPackageIsVersion3
事情是这样的:我参考go的 grpc 实现 https://grpc.io/docs/quickstart/go/ Download the example The grpc code that wa ...
- Git配置用户名、邮箱
当安装完 Git 应该做的第一件事就是设置你的用户名称与邮件地址. 这样做很重要,因为每一个 Git 的提交都会使用这些信息,并且它会写入到你的每一次提交中,不可更改. 否则,用户名会显示为unkno ...