JavaScript에서 JSON을 예쁘게 인쇄하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript에서 JSON을 예쁘게 인쇄하는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-12-14 04:35:09

원래의

285명이 탐색했습니다.

How to Pretty-Print JSON in JavaScript?

JavaScript를 사용하여 JSON을 예쁘게 인쇄

JSON 데이터를 사람이 읽을 수 있는 형식으로 변환하는 것은 구조를 디버깅하고 이해하는 데 매우 중요합니다. JavaScript에서 "pretty-printing" JSON은 기본적으로 JSON.stringify() 메서드를 통해 지원됩니다.

Native Pretty-Printing

JSON.stringify() 함수 변환할 JSON 객체, 대체 함수(선택 사항) 및 간격 수준(선택 사항)의 세 가지 인수를 사용합니다. 간격을 지정하려면 세 번째 인수로 양의 정수를 전달하십시오. 예:

var obj = { foo: 'bar', baz: [1, 2, 3] };
var json = JSON.stringify(obj, null, 2);

로그인 후 복사

이 결과는 다음과 같습니다.

"{
  "foo": "bar",
  "baz": [
    1,
    2,
    3
  ]
}"

로그인 후 복사

구문 강조

보다 시각적으로 명확하게 하기 위해 정규식을 사용하여 다음을 수행할 수 있습니다. JSON 문자열에 구문 강조를 적용합니다. 예:

function syntaxHighlight(json) {
  // Escape HTML characters
  json = json.replace(/&/g, '&amp;').replace(/</g, '<').replace(/>/g, '>');
  
  // Highlight different types using span tags
  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>`;
  });
}

로그인 후 복사

이 함수는 주요 요소를 다양한 색상과 스타일로 대체하여 JSON 구조를 더 읽기 쉽게 만듭니다.

예

다음은 네이티브 예쁜 인쇄와 구문 강조를 결합한 예입니다.

// Pretty-print the JSON object
var json = JSON.stringify(obj, null, 2);

// Highlight the JSON string
var highlighted = syntaxHighlight(json);

// Display the highlighted JSON string in the browser console
console.log(highlighted);

로그인 후 복사

위 내용은 JavaScript에서 JSON을 예쁘게 인쇄하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!