【VueJS/】bl2br自作

DBから値を改行ありで表示したいのですが、
phpのbl2brメソッドがJavaScriptには存在しないので自作します。

jsフォルダ直下に作成し、importで使い回すことにしました。
今回はVueを扱っているので、変数の中で定義することにします。

js/common.js

const nl2br = (str) => {
    str = str.replace(/\r\n/g, "<br />");
    str = str.replace(/(\n|\r)/g, "<br />");
    return str;
}

// 関数を別ファイルで使い回すための記述
export { nl2br }

v-htmlを使用し、
をHTMLとして処理・表示します。

<script setup>
    import { nl2br } from '@/common'
</script>


<template>
    <textarea v-html="nl2br(DBから取得する値)">
        
    </textarea>
</template>

これで完了です。