[フロント]quillで生成されたHTMLからHTMLタグを抜き、aタグ内のリンクをpタグ、hタグで出来た段落の後ろに付ける[TypeScript]

quillのHTML WYSIWYGエディタを使用してメールエディタを作成しようとしたが
仕事でHTMLメール本文をテキストに変換する必要が出たため、休日に方法を検討して文章でまとめました。
ここにその方法を記録します。

• 行いたいこと
  • pタグとhタグの段落に挟まれたaタグが持つリンクを段落の後ろに配置したい
  • quill出力されるhtmlタグをテキストメール用で使用するためHTMLタグを外したい

1. pタグ、H1~9タグの中にあるaタグが持つhrefの中身をまとめて外に出す
   • 今回は段落の後ろにリンクをまとめて配置したかったため苦労しました。

const convertUrl = (text: string): string => {
  // pタグとhタグを識別する正規表現
  const paragraph = /<p>.+?<\/p>|\<h[0-9]\>.+?<\/h[0-9]\>/g;
  // aタグ内のhrefを識別する正規表現
  const href = /href="(.+?)"/g;
  //   matchしたhrefの中身からhrefと""を除去するための正規表現
  const removeHref = /href=|"/g;
  return text.replace(paragraph, (matchedParagraph) => {
    const convertedParagraph = matchedParagraph
      .match(href)
      ?.map((matchedHref) => {
        return "<p>" + matchedHref.replace(removeHref, "") + "</p>"; // リンクは一旦pタグで囲う
      });
    if (convertedParagraph) {
      return matchedParagraph + convertedParagraph.join(""); // 配列として外に出されたリンクを繋げる
    } else return matchedParagraph;
  });
};

1. HTMLのタグを除去する
   • 少し泥臭いですがquillで使用するタグを全て正規表現でテキストに変換します
     • 今回はpタグとhタグ、liタグを改行に変換しています
     • 他にもquillのタグを使用したい場合は置き換える内容を増やしてください

    const convertHtmlToText= (mailHtml: string): string => {
      const convertedHtml = convertUrl(mailHtml);
      return convertedHtml
        .replace(/<p><br><\/p>/g, '\n')
        .replace(/<\/p>/g, '\n')
        .replace(/<\/h1>/g, '\n')
        .replace(/<\/h2>/g, '\n')
        .replace(/<\/h3>/g, '\n')
        .replace(/<\/h4>/g, '\n')
        .replace(/<\/h5>/g, '\n')
        .replace(/<\/h6>/g, '\n')
        .replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, '');
    };

上記のスクリーンショットのようなQuillのリンクを含む文字列を

のようなテキストに変換ができます