Laravel

【Laravel】Bladeコンポーネントでテキストデータを改行させる方法

 

LaravelのBladeコンポーネントでテキストデータを改行させるには一工夫必要です。

前置き

例えば、以下のようにtextareaで改行付きテキストを登録したとします。

<div class="flex flex-col space-y-2">
    @php($key = 'form.description')
    <label for="{{ $key }}" class="font-bold text-lg">ギャラリー用説明文</label>
    <x-forms.textarea id="{{ $key }}" wire:model.defer="{{ $key }}" />
    @error($key)
        <x-forms.message>{{ $message }}</x-forms.message>
    @enderror
</div>

先程登録したデータを反映してみます。

<p class="text-sm text-gray-900 font-light px-6 py-4">{{ $image->description }}</p>

これでは改行は反映されません。

nl2br関数で改行できるじゃん！でも、できません😢

PHPにはnl2brという改行を反映させる関数があるので使ってみましょう。

<p class="text-sm text-gray-900 font-light px-6 py-4">
{!! nl2br($image->description) !!}
</p>

改行されません。。。

実はLaravelの二重括弧{{}}内の記述はエスケープされます。
そのため、改行タグ<br>はエスケープされ、そのまま反映されます。

{!! nl2br(e()) !!}で今度こそ改行できる！

{{}}は使わずに{!! nl2br(e()) !!}を使うことでテキストの改行を反映させることができます。

データ全体のエスケープはせず、e関数でデータのみをエスケープし、それに対してnl2br関数で改行を行うという流れになります。

<p class="text-sm text-gray-900 font-light px-6 py-4">
{!! nl2br(e($image->description)) !!}
</p>

各関数の詳細は以下の通りです。

関数説明
{!! !!}エスケープさせずに値をechoする
e()htmlspecialcharsのLaravelヘルパー関数
nl2br()テキストデータの改行を行う
関連記事