Open2024/05/22にコメント追加2

1. HTML文字列からタグを除去

DOMParser() を使うと文字列を解析して通常のDOMと同様に扱えるようになります。

const html = '<h1>hello <strong>world</strong></h1>'
const root = new DOMParser().parseFromString(html, 'text/html')

root.body.textContent
// => 'hello world'

textContent プロパティを使ってテキストのみの文字列を取得できます。

たかもそ

一部タグの中身が取得されてしまう

HTML文字列の途中に <style> や <script> タグがあるとその中身までテキストとして取得されてしまう挙動がありました。

const html = '<h1>hello<style>css</style><script>js</script> <strong>world</strong></h1>'
const root = new DOMParser().parseFromString(html, 'text/html')

root.body.textContent
// => 'hellocssjs world'

なので、余計なタグを削除してからテキストとして取得することにします。

const html = '<h1>hello<style>css</style><script>js</script> <strong>world</strong></h1>'
const root = new DOMParser().parseFromString(html, 'text/html')

root.querySelectorAll('style, script').forEach(element => element.remove())

root.body.textContent
// => 'hello world'