当前位置: 首页 > 工具软件 > JSON 2 HTML > 使用案例 >

json在html页面上高亮显示

徐佐
2023-12-01

如果不需要高亮显示,只要把json.stringify()之后的数据放在pre标签里面就行

如果需要高亮显示,可参考下面代码:
js

    function syntaxHighlight( json )
        {
            json = json.replace( /&/g, '&amp;' ).replace( /</g, '&lt;' ).replace( />/g, '&gt;' );
            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>
 类似资料: