如果不需要高亮显示,只要把json.stringify()之后的数据放在pre标签里面就行
如果需要高亮显示,可参考下面代码:
js
function syntaxHighlight( json )
{
json = json.replace( /&/g, '&' ).replace( /</g, '<' ).replace( />/g, '>' );
return json.replace( /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function ( match )
{
console.log(match)
var cls = 'number';
if ( /^"/.test( match ) )
{
if ( /:$/.test( match ) )
{
cls = 'key';
} else
{
cls = 'string';
}
} else if ( /true|false/.test( match ) )
{
cls = 'boolean';
} else if ( /null/.test( match ) )
{
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
} );
}
var data={
"a":1,
"b":2
}
var str = JSON.stringify( data, undefined, 4 );
$("#detail").html( syntaxHighlight( str ));
html
<pre id="detail" class="form-control" style="width:800px;height:400px;max-width:800px;max-height:500px"></pre>