How to display and format JSON data in HTML page

Time:2020-9-15

JSON data is displayed and formatted in HTML page

1、 Display effect picture

Description information:

  • All key values are marked in red, indicating important parameters;
  • The value value is marked with different colors, the numeric type is orange, the string is green, and the Boolean is blue…

2、 Source code display

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <style>
    pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
    .string { color: green; }
    .number { color: darkorange; }
    .boolean { color: blue; }
    .null { color: magenta; }
    .key { color: red; }

    .showinfo{
        position: absolute;
        background-color: #eef1f8;
        width: 200px;
        padding: 5px;
        border-radius: 4px;
        border: 1px solid #ccc;
        display: none;
    }
    .showinfo pre{
        padding: 5px;
        border: 1px solid #ccc;
        margin:0;
    }
    table,th,td{
        border:1px solid blue;
    }
</style>
<script src="./js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">

    $(document).ready(function(){
        $(".show-rough").mouseover(function(){
            Var left = $(this). Offset(). Left + $(this. Width() + 20; // calculates the div display position
            var top = $(this).offset().top + 20;
            var _jsonDate = $.parseJSON($(this).text());
            var showJson = syntaxHighlight(_jsonDate);
            $("#show-info").css({"left":left,"top":top}).show();
            $("#show-pre").html(showJson);
        });
        $(".show-rough").mouseout(function(){
            $("#show-info").hide().html();
            $("#show-pre").html();
        })
    });
    //Processing JSON data, using regular filtering out different types of parameters
	function syntaxHighlight(json) {
    if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, 2);
    }
    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) {
        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>';
    });
};
</script>
</head>
<body>
<table>
    <thead>
        <tr>
            < th > name < / th >
            < th > JSON data < / th >
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Junior</td>
            < TD class = "show rough" > {"name": "Xiao San", "address": "23 Beijing Road", "age": 16, "email":“ [email protected] "," object ": [{" position ":" manager "}]," del ": []}</td>
        </tr>
        <tr>
            <td>Junior four</td>
            < TD class = "show rough" > {"name": "Xiao Si", "address": "No.01 Shanghai Road", "age": 27, "email":“ [email protected] ","Object":[],"del":[]  }</td>
        </tr>
    </tbody>
</table>
<div id="show-info" class="showinfo">
    <pre id="show-pre">

</pre>
</div>
</body>
</html>

3、 Source code upload

Source code download address

This article introduces the method of displaying JSON data and formatting in HTML page. For more related HTML displaying JSON and formatting content, please search the previous articles of developeppaer or continue to browse the related articles below. I hope you can support developeppaer more in the future!