HTML構造の文字列をJavaScriptで加工する必要があった際に、正規表現を使用して取得することができました。厳密にいうとタグは親子関係だとうまくいかないのですが、せっかくなので備忘録を残します。参考程度にご覧ください。
Contents
html構造の文字列とは
まずhtml構造の文字列とはどんなものかを書いておきます。
いかのような文字列です。
let str = "<h1 class='class1'>見出し１</h1><p>記事の内容が続く</p><p>記事の内容が続く</p><h2 class='class2'>見出し2</h2><p>記事の内容が続く</p><ul><li>リスト1</li><li>リスト2</li><li>リスト3</li></ul><p>記事の内容が続く</p>";divなどはなくh1などの見出しタグにpタグ、リストなどのul、liタグなどが書かれたhtml文字列です。
html構造の文字列をタグごとに配列にする
html構造なのでタグの不等号の記号 <> を正規表現で認識できれば掴めるかなと正規表現でタグごとに取得してみました。
let str = "<h1 class='class1'>見出し１</h1><p>記事の内容が続く</p><p>記事の内容が続く</p><h2 class='class2'>見出し2</h2><p>記事の内容が続く</p><ul><li>リスト1</li><li>リスト2</li><li>リスト3</li></ul><p>記事の内容が続く</p>";
console.log(str.match(/<(.*?).*?<\/\1>/g));以下のような配列が取得できます。
正規表現の記号の意味についてはこちらでまとめています。
["<h1 class='class1'>見出し１</h1>", '<p>記事の内容が続く</p>', '<p>記事の内容が続く</p>', "<h2 class='class2'>見出し2</h2>", '<p>記事の内容が続く</p>', '<ul><li>リスト1</li><li>リスト2</li><li>リスト3</li></ul>', '<p>記事の内容が続く</p>']ul、liの箇所が若干汚い感じになってしまっていますが、文字がうまく分割できたかなと思います。
これを使ってサイトへ投稿するデータを加工したりしました。
おわり
当たり前ですがダブルクォーテーションとシングルクォーテーションが混在しているとうまくいかなかったりで、1日はまりましたがなんとか形にはなりました。
