htmlタグを含めた変数をviewで表示する方法・Laravel

【Laravel】htmlタグを含めた変数をviewで表示【htmlタグが文字列で表示される問題解決】

今回はhtmlタグを含めた変数をコントローラーで用意し、ビューファイルで表示する方法を解説します。

たとえば、ループ文を使って年月日のセレクトボックスを作成するhtmlタグ入りの変数を作り、ビューファイルでその変数を表示してみると「htmlタグがそのまま文字列として表示」されてしまいます。

ビューファイルにPHPの処理を書きたくなくて、コントローラーで書きたい人にとって由々しき事態です。

ビューファイルにある程度処理を書くのは平気の私は、この問題を後輩に聞かれたとき、即答できませんでした……それぞれ書き方がありますね!

調べてみるとメチャクチャ簡単だったので、解説するまでもないけどその方法を紹介します。

目次

htmlタグを含めた変数をviewで表示する方法

本来、ビューファイルで変数を表示する方法は以下の記述方法です。

{{ $text }}

それを、以下のように変えるだけです!

{!! $text !!}

「{}」を一つずつ削り、「!!」を追加すると、変数にあるhtmlタグがしっかりhtmlタグとして認識してくれます!

実際に使ってみましょう。
コントローラーでhtmlタグ入りの変数を用意します。

    public function index()
    {
        $text = '<font color="red">htmlタグのテスト</font>';
        return view('text', compact('text'));
    }

ビューファイルでは、以下の2つを試しに書いてみます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
{{ $text }}
<br>
{!! $text !!}
</body>
</html>

ブラウザで確認すると、以下のような表示になりました!

「{{ }}」で書いたほうは、htmlタグがそのまま文字列として表示されています。
「{! !}」で書いたほうはhtmlタグを認識してくれてますね!

htmlタグを含む変数を作って表示したい場合は、「{! !}」で表示するようにしましょう!

さいごに

今回はhtmlタグを含めた変数を、ビューファイルで表示しようとするとhtmlタグも文字列で表示されてしまう問題の解決方法を説明しました。

解決方法はいつも変数を表示する際に「{{ }}」を使うところを、「{! !}」に変えるだけなので、とても簡単ですね。

質問された時に即答できなかったのが心残りで、備忘録として記事にしてみました。
誰かのお役に立てる記事になれば幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次