Open2

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

たかもそたかもそ

https://x.com/takamosoo/status/1667096874371936257

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'