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はまだ実験段階であるため、その実装は変更される可能性があり、サポートは制限される可能性があります。