json字符串格式化html代码

在web开发中，经常需要将json字符串格式化为易读的HTML代码。例如我们从服务器端获取到的json数据，一般都是一长串的字符串，难以直观地进行查看和修改。而将其格式化为HTML代码，就可以通过浏览器进行一一对应的查看和修改了。

// 原始json字符串
{
  "name": "John","age": 25,"city": "New York","hobbies": ["reading","swimming","travelling"],"friends": [
    {
      "name": "Mary","age": 24,"hobbies": ["singing","dancing"]
    },{
      "name": "Tom","age": 27,"hobbies": ["playing basketball","watching movies"]
    }
  ]
}

将上面的json字符串格式化为HTML代码，可以使用一些常用的工具类库，例如jQuery、lodash等。

// 使用jQuery的方式进行格式化
$(document).ready(function() {
  var data = JSON.parse(jsonStr);
  var htmlStr = JSON.stringify(data,null,2)
                .replace(/&/g,'&')
                .replace(/,'<')
                .replace(/>/g,'>')
                .replace(/'/g,''')
                .replace(/"/g,'"');
  $('pre').html(htmlStr);
});

上述代码的作用是先将json字符串转换为javascript对象，再使用JSON.stringify()方法将其格式化为可读性较强的字符串，最后使用jQuery的html()方法将其插入到pre标签中即可。其中replace()方法的作用是将字符串中的一些符号进行转义，以免出现HTML代码格式混乱的情况。

在使用lodash的情况下，由于其拥有更强大的功能和丰富的api，因此可以更加方便地进行json字符串格式化。

// 使用lodash的方式进行格式化
var data = JSON.parse(jsonStr);
var htmlStr = _.replace(JSON.stringify(data,2),/[\{\}\[\],:]/g,function(match) {
                return '' + match + '';
              })
              .replace(/&/g,'&')
              .replace(/,'<')
              .replace(/>/g,'>')
              .replace(/(\")(.+?)(\":)/g,'$1$2$3')
              .replace(/(\d+)/g,'$1')
              .replace(/(\")(.*?)\1/g,'$1$2$1');
$('pre').html(htmlStr);

上述代码使用了lodash的replace()方法结合正则表达式进行字符串替换操作，实现了对json字符串的格式化。通过在各种符号、数字、字符串等部分中添加不同的class属性，可以使得生成的HTML代码更具可读性，后续的修改也更加方便。