JavaScript로 JSON을 예쁘게 인쇄하고 구문 강조를 추가하려면 어떻게 해야 하나요?-JS 튜토리얼-php.cn

JavaScript로 JSON을 예쁘게 인쇄하고 구문 강조를 추가하려면 어떻게 해야 하나요?

Linda Hamilton

풀어 주다： 2024-12-19 22:34:11

원래의

561명이 탐색했습니다.

How can I pretty-print JSON in JavaScript and add syntax highlighting?

JavaScript로 JSON을 예쁘게 인쇄하기

JSON을 사람이 읽을 수 있는 형식으로 표시하는 것은 데이터를 이해하고 디버깅하는 데 필수적입니다. JavaScript에서는 기본 JSON.stringify() 함수를 통해 이를 수행합니다.

기본 Pretty-Printing:

JSON.stringify()의 세 번째 인수는 Pretty를 가능하게 합니다. -printing 및 들여쓰기 수준을 지정합니다. 예를 들면 다음과 같습니다.

var str = JSON.stringify(obj, null, 2); // spacing level = 2

로그인 후 복사

이렇게 하면 2개의 들여쓰기가 포함된 JSON이 출력되어 읽기 쉽습니다.

구문 강조:

의 경우 좀 더 정교한 형식을 지정하려면 정규식을 사용하여 JSON 내의 다양한 요소를 강조 표시할 수 있습니다. string.

function syntaxHighlight(json) {
  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>';
  });
}

로그인 후 복사

이 함수는 특정 패턴을 HTML 태그로 대체하여 다양한 JSON 요소에 색상 등의 스타일을 적용합니다.

전체 코드 조각:

포괄적인 예는 다음과 같습니다.

function output(inp) {
  document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function syntaxHighlight(json) {
  return json.replace(/&amp;/g, '&amp;amp;').replace(/</g, '&amp;lt;').replace(/>/g, '&amp;gt;');
}

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

로그인 후 복사

이 스크립트는 JSON 개체를 구문 분석합니다. 보기 좋게 인쇄하고 구문 강조 JSON과 함께 표시합니다.

위 내용은 JavaScript로 JSON을 예쁘게 인쇄하고 구문 강조를 추가하려면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!