HTML을 JSON으로 변환

이 문서에서는 HTML 코드를 JSON으로 변환하는 방법을 소개합니다.

JavaScript JSON.stringify() 메서드를 사용하여 HTML을 JSON으로 변환

JSON은 자바스크립트 객체와 유사하며 키가 JSON에서 문자열로 작성된다는 차이점이 있습니다. JSON은 언어에 종속되지 않으며 애플리케이션 또는 컴퓨터 간에 데이터를 교환하는 데 사용됩니다.

JSON 문자열의 예는 다음과 같습니다.

'{
    "name":"John",
    "age":30,
    "car":null
}'

JSON.stringify() 메서드를 사용하여 이러한 표현으로 HTML 문서를 변환할 수 있습니다. 이 메서드는 JavaScript 개체를 JSON 문자열로 변환합니다.

예를 들어 다음 HTML 문서를 JSON으로 변환합니다.

코드 - HTML:

<div id='para'>
  <p>
    Paragraph 1
  </p>
  <p>
    Paragraph 2
  </p>
</div>

JSON으로 변환할 문서를 가져와야 합니다. HTML에서 변환할 컨테이너의 id는 para입니다.

document.getElementById() 메서드를 사용하여 para ID가 있는 문서를 반환합니다. para 변수는 전체 HTML 문서를 저장합니다.

var para = document.getElementById('para');

다음으로 outerHTML 속성을 사용하여 para 변수의 직렬화된 HTML 콘텐츠를 반환합니다. html 변수는 전체 문서를 문자열 형식으로 포함합니다.

var html = para.outerHTML;

그런 다음 html 문자열을 JavaScript 개체로 저장합니다. 객체의 키 이름을 html로 지정합니다.

var obj = {html: html};

마지막으로 JSON.stringify() 메서드를 사용하여 객체를 변환합니다.

var json = JSON.stringify(obj);

완전한 소스 코드 - JavaScript + Node.js:

var para = document.getElementById('para');
var html = para.outerHTML;
var obj = {html: html};
var json = JSON.stringify(obj);
console.log(json)

출력:

"{'html':'<div id=\'para\'>\n  <p>\n    Paragraph 1\n  </p>\n  <p>\n    Paragraph 2\n  </p>\n</div>'}"

이렇게 하면 선택한 HTML을 JSON으로 변환할 수 있습니다.