原生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} ...
随机推荐
- sqli-lab(13)
Double Injection- String- with twist(双注入 - 字符型 - 变形) 来进行我们的注入测试 直接闭合,用户名和密码输入“ ‘) or (‘1’) = (‘1%23 ...
- spring cloud:HystrixDashboard
hystrix-dashboard-server 1. File-->new spring starter project 2.add dependency <parent> < ...
- kafka window安装与配置
一.安装jdk1.8(此处省略) 二.安装zookeeper1. 下载安装包:http://zookeeper.apache.org/releases.html,解压到指定目录(如下) 2. 在系统变 ...
- ls -i
ls的不同选项有不同的含义: -l 是用long的长格式显示 条目信息 -a 显示所有的文件, 包括隐藏文件 -i: 是显示inode, 主要是用来查看硬链接的
- 阶段2 JavaWeb+黑马旅游网_15-Maven基础_第5节 使用骨架创建maven的java工程_18maven的java工程取mysql数据库
使用maven创建ava功能,然后读取数据库做一个测试. 我们做的持久层,没有和页面有交互,只做一个java工程就可以了 创建的是java工程,用不用骨架都可以.这里不使用骨架,直接next 直接fi ...
- keepalive + nginx 搭建高可用集群动态网站
环境准备: 两台节点部署keepalived,并且设为互为主从,实现高可用. 两台从节点部署nginx以及相关组件,作为真实服务器实现动态网站上线. 一.MASTER(BACKUP)节点下载keepa ...
- Django中Cookie和Session配置和操作
Cookie Cookie以键值对Key-Value形势进行信息的存储. Cookie基于域名安全,不同域名的Cookie是不能互相访问的 Cookie是存储在浏览器中的一段纯文本信息,建议不要存储敏 ...
- 如何通过shell脚本或一行命令更改root密码？
哪个能用就用哪个吧! 方法一, echo -e "newpwd\nnewpwd" | (passwd root) 方法二, echo "newpwd" | pa ...
- 13.DoS防御----BeEF浏览器渗透----暴力破解之美杜莎---DNS指南
DoS防御 启用ICMP,UDP,TCP泛洪过滤 登录路由器管理后台 高级-安全部分 BeEF浏览器渗透 用kali进行客户端攻击 钓鱼攻击 打开beef 浏览器打开beef cd /usr/shar ...
- java 对象 json 集合 数组 互转
1.先定义一个类对象 package com.basics; import com.alibaba.fastjson.JSONObject; import java.util.List; import ...