JavaScript:
HTMLのパース

方法：

JavaScriptのDOMParser APIを使用してHTMLを解析しましょう。

const parser = new DOMParser();
const htmlString = `<p>Hello, world!</p>`;
const doc = parser.parseFromString(htmlString, 'text/html');
console.log(doc.body.textContent); // 出力：Hello, world!

次に、クラスを持つような特定のものを取得しましょう：

const htmlString = `<div><p class="greeting">Hello, again!</p></div>`;
const doc = parser.parseFromString(htmlString, 'text/html');
const greeting = doc.querySelector('.greeting').textContent;
console.log(greeting); // 出力：Hello, again!

詳細解説

HTMLの解析はウェブが誕生した時からあります。当初はブラウザの仕事でした—ブラウザがHTMLを解析してウェブページを表示しました。時間が経つにつれ、プログラマーはこのプロセスを利用したいと思うようになり、DOMParserのようなAPIが生まれました。

代替案は？もちろんあります。jQueryやPythonのBeautifulSoupのようなライブラリやツールがあります。しかし、JavaScriptのネイティブDOMParserは速くて組み込まれているので、追加のライブラリは必要ありません。

実装面では、DOMParserでHTMLを解析すると、Documentオブジェクトが作られます。これをあなたのHTMLの階層モデルと考えてください。それが手に入れば、通常のウェブページのDOMと同じようにナビゲートや操作が可能になります。

ここでのポイント—解析処理は不正なHTMLに引っかかることがあります。ブラウザは寛容ですが、DOMParserはそうではないかもしれません。したがって、複雑なタスクや乱雑なHTMLに対しては、サードパーティのライブラリの方がより良いクリーンアップ作業を行うかもしれません。

参照

• DOMParser APIについてのMDNウェブドキュメント: MDN DOMParser
• jQueryの解析機能: jQuery.parseHTML()
• サーバー用の高速で柔軟かつ軽量なjQueryのコア実装であるCheerio: Cheerio.js
• JS非対応の解析について：PythonのBeautifulSoupライブラリ: Beautiful Soup