こんにちは！
今回は「Javascriptで正規表現のreplaceで処理時間がかかってしまう原因と対策」についてお伝えしたいと思います。
業務で経験したのですが、少し正規表現の書き方を変えるだけで処理時間が10秒くらい縮まりました。笑
あくまで一例ですが、参考になればと思い記事にしました。
事象と原因：正規表現の書き方次第で、対象文字列の探索に時間がかかってしまう
replace()関数で正規表現を使う場合、第1引数の正規表現を満たす文字列を第2引数の文字列に置換すると思います。
例えば、以下の例です。
// 置換処理
const base64 = e.target.result.replace(/^data:.*\/.*;base64,/, '');これでも置換自体は問題なくされるのですが、1MB程度のbase64データの場合に10秒近くかかってしまうことがありました。（環境による思いますが...）
恐らく、.*の任意の文字を繰り返しが探索に時間を要したのだと思います。
対策：正規表現の書き方を工夫し、対象の文字列を絞る
上記の通り、任意の文字列を対象にしているのが原因のようだったので、対象を絞ってみました。
具体的には以下のように書き換えました。
// 置換処理
const base64 = e.target.result.replace(/^data:\w+\/[a-zA-Z_0-9-.]+;base64,/, '');こうすることで、1MB程度のbase64文字列でも処理時間を0.1秒程度まで抑えることができました。
以上、お疲れさまでした！🍵