retty-print JSON using JavaScript</pretty-print JSON using JavaScript>- 오후 2:00

JSON을 인간에게 읽기 쉬운 형식으로 어떻게 표시할 수 있을까요? 들여쓰기와 공백을 주된 요소로, 심지어 색상 / 글꼴 스타일 / 기타 등과 같은 것을 사용할 수 있습니다.

답변 1

기능 syntaxHighlight(json) {
    만약 (typeof json != 'string') {
        json = JSON.stringify(json, undefined, 2);
    }
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    반환 json.replace(/((\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\])*(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (매치) {
        var cls = 'number';
        만약 (/^/.test(매치)) {
            만약 (/:$/.test(매치)) {
                cls = 'key';
            } 아니면 {
                cls = 'string';
            }
        } 아니면 만약 (/true|false/.test(매치)) {
            cls = 'boolean';
        } 아니면 만약 (/null/.test(매치)) {
            cls = 'null';
        }
        반환 '<span class=' + cls + '>' + 매치 + '</span>';
    });
}

실제 작동은 여기에서 확인하십시오: jsfiddle

또는 아래의 풀 스니펫을 참조하십시오:

function output(inp) {

    document.body.appendChild(document.createElement('pre')).innerHTML = inp;

}



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) {

        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 obj = {a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]};

var str = JSON.stringify(obj, undefined, 4);



output(str);

output(syntaxHighlight(str));

pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }

.string { color: green; }

.number { color: darkorange; }

.boolean { color: blue; }

.null { color: magenta; }

.key { color: red; }

답변 2

JSON을 사용하여 JavaScript를 통해 예쁘게 출력하기
JSON(JavaScript Object Notation)은 데이터를 구조화하여 전송하기 위해 사용되는 경량의 데이터 교환 형식입니다. JSON은 단순하고 읽기 쉽고 쓰기 쉽기 때문에 웹 개발에서 많이 활용됩니다. 이번에는 JSON을 사용하여 JavaScript를 통해 예쁘게 출력하는 방법에 대해 알아보겠습니다.
JavaScript에서 JSON 데이터를 예쁘게 출력하는 방법은 다양한 방법이 있지만, 여기서는 JSON.stringify와 CSS를 활용하는 방법을 알려드리겠습니다.
먼저, JSON.stringify 메소드는 JavaScript 객체를 JSON 문자열로 변환해줍니다. 이 메소드는 첫 번째 인자로 입력 받은 객체를 JSON 형식의 문자열로 변환해주는데, 이때 들여쓰기 옵션을 사용하여 예쁘게 출력할 수 있습니다.
예를 들어, 다음과 같은 JavaScript 객체가 있다고 가정해봅시다.
```javascript
var data = {
name: 'John',
age: 30,
hobbies: ['reading', 'coding', 'traveling']
};
```
이 객체를 예쁘게 출력하기 위해 JSON.stringify와 들여쓰기 옵션을 사용할 수 있습니다.
```javascript
var jsonStr = JSON.stringify(data, null, 2);
console.log(jsonStr);
```
위의 코드에서 JSON.stringify 메소드의 세 번째 인자로 2를 전달했습니다. 이는 들여쓰기에 사용할 공백 문자열의 개수입니다. 따라서 위의 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다.
```plaintext
{
name: John,
age: 30,
hobbies: [
reading,
coding,
traveling
]
}
```
하지만 이 상태로는 아직 출력 결과가 직관적이지 않습니다. 이를 보완하기 위해 CSS를 활용하여 출력 결과를 더욱 예쁘게 만들 수 있습니다.
```html

```
위의 코드는 HTML에서 id가 json-output인 pre 요소를 생성하고, 이를 사용해 JSON 문자열을 출력합니다. 그리고 CSS를 사용하여 해당 pre 요소를 꾸며줍니다. 이렇게 하면 출력 결과를 예쁘게 보여줄 수 있습니다.
이와 같이 JSON을 사용하여 JavaScript를 통해 예쁘게 출력하는 방법을 알아보았습니다. JSON.stringify와 CSS를 함께 활용하면 출력 결과를 SEO에도 친화적으로 만들 수 있습니다. 예쁘게 출력된 JSON은 사용자에게 더 나은 경험을 제공하며, 검색 엔진에서도 더 잘 인식될 수 있습니다. 따라서 웹 개발에서 JSON 예쁘게 출력에 신경써서 사용하는 것이 좋습니다.