从一段字符串中提取JSON字符串并进行高亮格式化

需求：后台传过来一段字符串文本，需要从这段字符串中提取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;//栈顶位置，初始化为0this.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加1indent += 1} else if (item.match(/\}$/) || item.match(/\]$/) || item.match(/\},$/) || item.match(/\],$/)) {// 匹配到以}和]结尾的时候indent减1if (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

从一段字符串中提取JSON字符串并进行高亮格式化相关推荐

如何快速在一段字符串中提取想要的字符
如何快速在一段字符串中提取想要的字符想要实现上面的操作,在之前我会第一时间想到使用正则表达式进行提取,可是在我无意中发现有这么一个方法它能快速地从一段字符串中提取我们想要的字符, substring ...
单词记忆系统二：音标字符输入(re从字符串中提取音标字符；依序打印音标字符；输入对应序号；替换序号。-＞完成“音标输入”)
Python 官网:https://www.python.org/ Free:大咖免费"圣经"教程< python 完全自学教程>,不仅仅是基础那么简单-- My CS ...
C语言从一段字符串中提取IP地址的方法
1. 需求当前待解析字符串格式为: +CIFSR:STAIP,<Station IP address> +CIFSR:STAMAC,<Station MAC address> ...
【转】SQL函数：字符串中提取数字，英文，中文，过滤重复字符
SQL函数:字符串中提取数字,英文,中文,过滤重复字符 --提取数字 IF OBJECT_ID('DBO.GET_NUMBER') IS NOT NULL DROP FUNCTION DBO.GET_ ...
R语言str_sub函数从字符串中提取或替换子字符串（substring）：str_sub函数指定起始位置和终止位置抽取子字符、str_sub函数指定起始位置和终止位置替换子字符串
R语言str_sub函数从字符串中提取或替换子字符串(substring):str_sub函数指定起始位置和终止位置抽取子字符.str_sub函数指定起始位置和终止位置替换子字符串目录
python电话号码对应的字符组合_Python3 在字符串中提取字母+数字组合微信账号、电话等 - pytorch中文网...
今天处理数据要提取字符串中的微信,字符串中包含中文英文Emoji,标点符号等. python 提取字符串中的电话提取电话相对简单,多个电话也可以提取 import re desstr = " ...
正则表达式 - 去掉乱码字符/提取字符串中的中文字符/提取字符串中的大小写字母 - Python代码
目录 1.乱码符号种类较少,用replace() 2.乱码字符种类较多,用re.sub() 3.提取字符串中的中文字符 4.提取字符串中的中文字符和数字 5.提取其他数据清洗的时候一大烦恼就是数据中 ...
Java通过正则剔除乱码_正则表达式 - 去掉乱码字符/提取字符串中的中文字符/提取字符串中的大小写字母 - Python代码...
目录 1.乱码符号种类较少,用replace() 2.乱码字符种类较多,用re.sub() 3.提取字符串中的中文字符 4.提取字符串中的中文字符和数字 5.提取其他数据清洗的时候一大烦恼就是数据中 ...
从字母数字字符串中提取数字
http://office.microsoft.com/zh-cn/excel-help/HA001154901.aspx 本文的作者是 Ashish Mathur,是一位 Microsoft MVP ...

从一段字符串中提取JSON字符串并进行高亮格式化

从一段字符串中提取JSON字符串并进行高亮格式化相关推荐

最新文章

热门文章