JavaScriptでHTML文字列からDOMへの変換とDOMからHTML文字列への変換方法

JavaScriptを使って、HTMLの文章を読み込んで操作する方法と、操作した後にまた文字列に戻す方法を紹介します。そのために、DOMParserとXMLSerializerを使います。

HTMLの文字列からDOMへの変換を行うには、以下のようにします。

// HTML文字列
const htmlString = "<div><h1>Hello, World!</h1><p>This is a paragraph.</p></div>";

// DOMParserを使ってDOMに変換
const parser = new DOMParser();
const dom = parser.parseFromString(htmlString, "text/html");

// ログ出力
console.log(dom.documentElement);

DOMからHTMLの文字列への変換を行うには、以下のようにします。

// XMLSerializerを使ってHTML文字列に変換
const serializer = new XMLSerializer();
const convertedHTML = serializer.serializeToString(dom);

// ログ出力
console.log(convertedHTML);