DOMParser: parseFromString() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

parseFromString() は DOMParser インターフェイスのメソッドで、 HTML または XML の入った文字列を構文解析し、 HTMLDocument または XMLDocument を返します。

メモ: 静的メソッドの Document.parseHTMLUnsafe() は、 HTML の文字列を Document 内の要素に構文解析できる、人間工学的な代替手段を提供します。

構文

js
parseFromString(string, mimeType)

引数

string

構文解析する文字列です。 HTML、xml、XHTML、svg のいずれかの文書が入っている必要があります。

mimeType

文字列。 この文字列は、文字列を構文解析する際に XML パーサーと HTML パーサーのどちらを使用するかを決定します。 有効な値は次のとおりです。

  • text/html
  • text/xml
  • application/xml
  • application/xhtml+xml
  • image/svg+xml

text/html の値を指定すると、 HTML パーサーを呼び出し、メソッドは HTMLDocument を返します。すべての <script> 要素は実行不可とマークされ、<noscript> のコンテンツがマークアップとして解釈されます。

他の有効な値 (text/xml, application/xml, application/xhtml+xml, image/svg+xml) は機能的に同等です。これらはすべて XML パーサーを呼び出し、メソッドは XMLDocument を返します。

他の値は無効であり、 TypeError が発生します。

返値

HTMLDocument または XMLDocument であり、これは mimeType 引数によって決まります。

例

XML、SVG、HTML の構文解析

MIME タイプが text/html の場合は HTML パーサーが起動され、その他の有効な MIME タイプの場合は XML パーサーが起動されることに注意してください。例えば、下記にある MIME タイプ application/xml と image/svg+xml は機能的には同一であり、後者には SVG 固有の解析ルールは含まれていません。この 2 つを判別する理由は、コードの意図を明確にするためだけです。

js
const parser = new DOMParser();

const xmlString = "<warning>Beware of the tiger</warning>";
const doc1 = parser.parseFromString(xmlString, "application/xml");
// XMLDocument

const svgString = '<circle cx="50" cy="50" r="50"/>';
const doc2 = parser.parseFromString(svgString, "image/svg+xml");
// XMLDocument

const htmlString = "<strong>Beware of the leopard</strong>";
const doc3 = parser.parseFromString(htmlString, "text/html");
// HTMLDocument

console.log(doc1.documentElement.textContent);
// "Beware of the tiger"

console.log(doc2.firstChild.tagName);
// "circle"

console.log(doc3.body.firstChild.textContent);
// "Beware of the leopard"

エラー処理

整形式の XML を表していない文字列をXMLパーサーで使用する場合、 parseFromString によって返される XMLDocument には、構文解析エラーの性質を記述した <parsererror> ノードが含まれます。

js
const parser = new DOMParser();

const xmlString = "<warning>Beware of the missing closing tag";
const doc = parser.parseFromString(xmlString, "application/xml");
const errorNode = doc.querySelector("parsererror");
if (errorNode) {
  // 構文解析に失敗
} else {
  // 構文解析に成功
}

さらに、構文解析エラーがブラウザーの JavaScript コンソールに報告される場合があります。

仕様書

Specification
HTML
# dom-domparser-parsefromstring-dev

ブラウザーの互換性

関連情報