需求：后台传过来一段字符串文本，需要从这段字符串中提取json字符串并在前台json格式化高亮显示
1.提取json字符串
注：当字符串中没有出现json字符串时返回null;
function getJson(jsonStr) {
var stringStack = new stack();
var indexList = [];
var jsonList = [];
for (var i = 0; i < jsonStr.length; i++) {
if (jsonStr.charAt(i) == '{' || jsonStr.charAt(i) == '[') {
stringStack.push(new JsonStack(i, jsonStr.charAt(i)));
} else if (jsonStr.charAt(i) == '}' || jsonStr.charAt(i) == ']') {
if (stringStack.dataStore.length!=0) {
var js = stringStack.peek();
if (jsonStr.charAt(i) == '}' && js.char == '{') {
js = stringStack.pop();
} else if (jsonStr.charAt(i) == ']' && js.char == '[') {
js = stringStack.pop();
}
indexList.push(js.index);
indexList.push(i);
}
}
if (stringStack.dataStore.length==0 && indexList.length > 0) {
var tempStr = getJsonStr(indexList, jsonStr);
if (!(tempStr == null || tempStr.length == 0)) {
jsonList.push(tempStr);
}
indexList.splice(0,indexList.length);;
}
}
if (indexList != null && indexList.length > 0) {
var tempStr = getJsonStr(indexList, jsonStr);
if (!(tempStr == null || tempStr.length == 0)) {
jsonList.push(tempStr);
}
}
if (jsonList != null && jsonList.length > 0) {
return jsonList[0];
} else {
return null;
}
}
function getJsonStr(indexList, str) {
var temp = "";
for (var i = indexList.length - 1; i >= 0; i = i - 2) {
try {
temp = str.substring(indexList[i - 1], indexList[i] + 1);
JSON.parse(temp);
return temp;
} catch (e) {
continue;
}
}
return null;
}
function JsonStack(index, char) {
this.index = index;
this.char = char;
}
function stack() {
this.dataStore = [];//保存栈内元素，初始化为一个空数组
this.top = 0;//栈顶位置，初始化为0
this.push = push;//入栈
this.pop = pop;//出栈
this.peek = peek;//查看栈顶元素
this.clear = clear;//清空栈
this.length = length;//栈内存放元素的个数
}
function push(element) {
this.dataStore[this.top++] = element;
}
function pop() {
return this.dataStore[--this.top];
}
function peek() {
return this.dataStore[this.top - 1];
}
function clear() {
this.top = 0;
}
function length() {
return this.top;
}
返回结果：
var str3='123143543=qweqwewe&qweqwew=45634342{"qwewqe12312":"qwewe"}'
console.log(getJson(str3))
2.json格式化
function transitionJsonToString (jsonObj, callback) {
// 转换后的jsonObj受体对象
var _jsonObj = null;
// 判断传入的jsonObj对象是不是字符串，如果是字符串需要先转换为对象，再转换为字符串，这样做是为了保证转换后的字符串为双引号
if (Object.prototype.toString.call(jsonObj) !== "[object String]") {
try {
_jsonObj = JSON.stringify(jsonObj);
} catch (error) {
// 转换失败错误信息
console.warn('您传递的json数据格式有误，请核对...');
return _jsonObj;
}
} else {
try {
jsonObj = jsonObj.replace(/(\')/g, '\"');
_jsonObj = JSON.stringify(JSON.parse(jsonObj));
} catch (error) {
// 转换失败错误信息
console.warn('您传递的json数据格式有误，请核对...');
return _jsonObj;
//console.error(error);
//callback(error);
}
}
return _jsonObj;
}
// callback为数据格式化错误的时候处理函数
function formatJson (jsonObj, callback) {
// 正则表达式匹配规则变量
var reg = null;
// 转换后的字符串变量
var formatted = '';
// 换行缩进位数
var pad = 0;
// 一个tab对应空格位数
var PADDING = ' ';
// json对象转换为字符串变量
var jsonString = transitionJsonToString(jsonObj, callback);
if (!jsonString) {
return jsonString;
}
// 存储需要特殊处理的字符串段
var _index = [];
// 存储需要特殊处理的“再数组中的开始位置变量索引
var _indexStart = null;
// 存储需要特殊处理的“再数组中的结束位置变量索引
var _indexEnd = null;
// 将jsonString字符串内容通过\r\n符分割成数组
var jsonArray = [];
// 正则匹配到{,}符号则在两边添加回车换行
jsonString = jsonString.replace(/([\{\}])/g, '\r\n$1\r\n');
// 正则匹配到[,]符号则在两边添加回车换行
jsonString = jsonString.replace(/([\[\]])/g, '\r\n$1\r\n');
// 正则匹配到,符号则在两边添加回车换行
jsonString = jsonString.replace(/(\,)/g, '$1\r\n');
// 正则匹配到要超过一行的换行需要改为一行
jsonString = jsonString.replace(/(\r\n\r\n)/g, '\r\n');
// 正则匹配到单独处于一行的,符号时需要去掉换行，将,置于同行
jsonString = jsonString.replace(/\r\n\,/g, ',');
// 特殊处理双引号中的内容
jsonArray = jsonString.split('\r\n');
jsonArray.forEach(function (node, index) {
// 获取当前字符串段中"的数量
var num = node.match(/\"/g) ? node.match(/\"/g).length : 0;
// 判断num是否为奇数来确定是否需要特殊处理
if (num % 2 && !_indexStart) {
_indexStart = index
}
if (num % 2 && _indexStart && _indexStart != index) {
_indexEnd = index
}
// 将需要特殊处理的字符串段的其实位置和结束位置信息存入，并对应重置开始时和结束变量
if (_indexStart && _indexEnd) {
_index.push({
start: _indexStart,
end: _indexEnd
})
_indexStart = null
_indexEnd = null
}
})
// 开始处理双引号中的内容，将多余的"去除
_index.reverse().forEach(function (item, index) {
var newArray = jsonArray.slice(item.start, item.end + 1)
jsonArray.splice(item.start, item.end + 1 - item.start, newArray.join(''))
})
// 奖处理后的数组通过\r\n连接符重组为字符串
jsonString = jsonArray.join('\r\n');
// 将匹配到:后为回车换行加大括号替换为冒号加大括号
jsonString = jsonString.replace(/\:\r\n\{/g, ':{');
// 将匹配到:后为回车换行加中括号替换为冒号加中括号
jsonString = jsonString.replace(/\:\r\n\[/g, ':[');
// 将上述转换后的字符串再次以\r\n分割成数组
jsonArray = jsonString.split('\r\n');
// 将转换完成的字符串根据PADDING值来组合成最终的形态
jsonArray.forEach(function (item, index) {
var i = 0;
// 表示缩进的位数，以tab作为计数单位
var indent = 0;
// 表示缩进的位数，以空格作为计数单位
var padding = '';
if (item.match(/\{$/) || item.match(/\[$/)) {
// 匹配到以{和[结尾的时候indent加1
indent += 1
} else if (item.match(/\}$/) || item.match(/\]$/) || item.match(/\},$/) || item.match(/\],$/)) {
// 匹配到以}和]结尾的时候indent减1
if (pad !== 0) {
pad -= 1
}
} else {
indent = 0
}
for (i = 0; i < pad; i++) {
padding += PADDING
}
formatted += padding + item + '\r\n'
pad += indent
})
// 返回的数据需要去除两边的空格
return formatted.trim();
}
function formateXml(xmlStr){
text = xmlStr;
//使用replace去空格
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) + '-->';
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 == '/');
var prefix = '';
if(isBegin == '!'){//!开头
prefix = setPrefix(nodeStack.length);
}else {
if(isBegin != '/'){///开头
prefix = setPrefix(nodeStack.length);
if(!isClosed){//非关闭标签
nodeStack.push(name);
}
}else{
nodeStack.pop();//弹栈
prefix = setPrefix(nodeStack.length);
}
}
var ret = '\n' + prefix + all;
return ret;
});
var prefixSpace = -1;
var outputText = output.substring(1);
//还原注释内容
outputText = outputText.replace(/\n/g,'\r').replace(/(\s*)<!--(.+?)-->/g,function($0, prefix, text){
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 ) + '-->';
return ret;
});
outputText= outputText.replace(/\s+$/g,'').replace(/\r/g,'\r\n');
return outputText;
}
//计算头函数 用来缩进
function setPrefix(prefixIndex) {
var result = '';
var span = ' ';//缩进长度
var output = [];
for(var i = 0 ; i < prefixIndex; ++i){
output.push(span);
}
result = output.join('');
return result;
}
格式化效果
var testJson=[{"locationInfo":[{"lng":119.768963,"lat":29.603972},{"lng":119.767786,"lat":29.600487}]}]
console.log(formatJson(testJson))
[
{
"locationInfo":[
{
"lng":119.768963,
"lat":29.603972
},
{
"lng":119.767786,
"lat":29.600487
}
]
}
]
关于高亮
高亮代码网上有很多插件，比如highlight.js
7133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
