HTML を JSON に変換する

この記事では、HTML コードを JSON に変換する方法を紹介します。

JavaScript JSON.stringify() メソッドを使用して HTML を JSON に変換する

JSON は JavaScript オブジェクトに似ており、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 に変換できます。