[js]javascript实现多个json对象及列表的美化，容错非法json

遗落尘污

873人浏览 · 2021-08-03 11:42:07

遗落尘污 · 2021-08-03 11:42:07 发布

javascript实现多个json对象及列表的美化，容错非法json

本文介绍的使用javascript格式化json，核心的函数是eval和JSON.stringify。

支持多个json混在一起的情况，通过统计{}[]来实现。不匹配的{}[]会原样返回。

测试用例1: {}
测试用例2: [1,2,3]
测试用例3: {a:1},[1,2,3]
测试用例4: {a},[b]
测试用例5: [1,2,3
测试用例6: {a:1,[1,2,3]

用例4-6是异常的json串，直接返回原有的数据。

下面是测试用例的输出结果（是直接将测试用例的整行输进去的）

- 测试用例1: `
{}
`

- 测试用例2: `
[
  1,
  2,
  3
]
`

- 测试用例3: `
{
  "a": 1
}
,
[
  1,
  2,
  3
]
`

- 测试用例4: `
{a}
,
[b]
`
- 测试用例5: `
[1,2,3`


- 测试用例6: `{a:1,[1,2,3]`

源码

源代码如下：


/**
 * 格式化json
 * 通过统计{}[]，自动识别多个json混在一起的情况。
 **/
function convert(input) {
  var s = input.trim(); // 忽略前后的空白
  var res = '';

  var eCharMap={
    '[':']',
    '{':'}'
  }

  // b是begin, e是end, cnt是count
  var bChar = '', eChar = '', cnt = 0;

  // 压缩还是美化，这里只是压缩。可以通过统计换行来决定是压缩还是美化。
  var isStrip = false; 

  var bIndex = 0, eIndex = -1;
  for(var i = 0;i<input.length;i++){
    var ch = input[i];
    if(eCharMap[ch]){
      if(cnt == 0 && i!=0){ // 开始新一轮匹配之前
        // 不是json的内容
        eIndex = i;
        var t = s.substring(bIndex, eIndex);
        res = res + "\n" + t;
      }
      
      if (cnt == 0){
        bChar = ch, eChar = eCharMap[ch], cnt = 1, bIndex = i;
        continue;
      }else if ((ch == bChar)){
        cnt = cnt + 1;
        continue;
      }

    } else if (ch == eChar){
      cnt = cnt - 1; // 匹配到后就减少
      if(cnt == 0){ // 完成了一次完整的匹配
        eIndex = i+1;
        var t = s.substring(bIndex, eIndex);
        t = beautify(t, isStrip);
        res = res +'\n'+t;
        bIndex = i+1;
        continue;
      }
    }
  }
  // 如果还没有处理完，直接加上
  if(cnt != 0){
    res = res + '\n'+s.substring(bIndex, input.length);
  }
  return res;
}


/**
 * isStrip true 为压缩
 * */
function beautify(s, isStrip){
  // 处理不是合法的json
  try{
    eval('obj='+s);
  }catch(e){
    return s;
  }

  // 如果包含换行，则压缩
  if(isStrip){
    return JSON.stringify(obj);
  }
  
  // 否则美化
  return JSON.stringify(obj, null, 2);
}