【React】テキストからURL、改行を探してaタグ、brタグに変換

地味にちょっと苦労したのでメモ チャットUIみたいなやつで、テキスト中にURLが存在すれば色を変えたかったのでclassをつけるためaタグにしたかったのと、\nが存在すれば<br>に変換したかった

const URL_REGEXP_CONTAINS = /(https?:\/\/[\w/:%#\$&\?\(\)~\.=\+\-]+)/g
const NEW_LINE_REGEXP = /(\n)/g

const textArray = text.split(URL_REGEXP_CONTAINS).map(t => {
            return t.split(NEW_LINE_REGEXP)
}).flat()

 return textArray.map(t => {
    if (NEW_LINE_REGEXP.test(t)) {
        return React.createElement('br')
    }
    if (URL_REGEXP.test(t)) {
        return React.createElement('a', {
            href: t,
            target: "_blank",
            referrer: "noreferrer",
                style: {
                    "color": "#f32840",
                    "text-decoration": "underline",
                    "text-decoration-color": "#f32840",
                }
        }, t)
    }
    return t
})