DOMParserを使用したHTML文字列の解析

WP Rest APIプラグインで遊んでいて、WordPressブログのコンテンツにIonic2アプリにアクセスしていました。 WP Rest APIは、投稿のコンテンツのHTML文字列を返すため、処理が困難になる可能性があります。 幸いなことに、 DOMParser Web APIを使用すると、html文字列を簡単に解析して完全に形成されたDOMにすることができます。

まず、新しいDOMParserインスタンスをインスタンス化し、 parseFromString（）を使用してHTML文字列を渡します。 この例では、HTML文字列をhtmlContentという変数に格納したとします。

let parser = new DOMParser();
let parsedHtml = parser.parseFromString(htmlContent, 'text/html');

そして今、parsedHtmlは相互作用できるDOMオブジェクトです。 それからいくつかのことを抽出しましょう：

// The src of the first image:
let firstImg = parsedHtml.images[0].src;

// The li elements of the second ul element:
let liElements = parsedHtml.getElementsByTagName("ul")[1].children;

li 要素を使用した2番目の例を取り上げて、もう少し進んで、各要素の内部HTMLを配列に入力してみましょう。

let rawLiElements = parsedHtml.getElementsByTagName("ul")[1].children;
let liElements = [];

👉DOMParserはまだ実験段階であるため、その実装は変更される可能性があり、サポートは制限される可能性があります。