【Laravel】エスケープした文字列をマークアップする方法

はじめに

　ポートフォリオ制作の過程で、データベースから取得したデータをマークアップしたい、という課題にぶつかり、見事にハマりましたので備忘録を残していきます。

Laravelのbladeテンプレート

　例えば、データベースにこのようなデータを挿入したとします。

昔々あるところに、おじいさんとおばあさんがおりました。おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に行きました。

これをmodelで取得、controllerからviewに渡して表示すると、当然そのまま表示されます。そこで、改行を入れたり、おじいさん、おばあさんを赤字で表記したい場合、どうすればいいでしょうか。

データベースから取得したデータをviewで表示する際、bladeテンプレートでは{{ $data }}などとしますが、取得したデータはデフォルトでHTMLエスケープ処理がされているので、自動的にXSS対策がされています。
　実は、{!! $data !!}とするとHTMLエスケープをせずに出力することが出来ます。なので直接HTMLタグを入力すればマークアップすることが出来ますね！！

・・・というわけにはいかず、やはりセキュリティの面からもエスケープ処理は必須です。

それでは、どのようにして実装していけば良いのでしょうか。

どうすればいいか

　jQueryを使ってこの問題を解決してみましょう。
まずは出力側をこのようにしてみます。

momotaro.blade.php

 <div class="content">
    {{ $data }}
 </div>

なんでもいいのでクラスを与えます。
次にjsファイルにこのように記述します。

momotaro.js

$(function(){
  var str = $('.content').text().replace(/\[/g, '<span class="red">')
  .replace(/\]/g, '</span>')
  .replace(/\|/g, '<br>');
  $('.content').html(str);
})

最後に、cssファイルにこのように書き加えてください。

style.css

  .red{ 
    color: red;
  }

さて、これで準備完了です。
それでは、データ挿入時にこのように入力してみましょう。

昔々あるところに、[おじいさん]と[おばあさん]がおりました。|[おじいさん]は山へ芝刈りに、[おばあさん]は川へ洗濯に行きました。

これを出力すると下記のようになります。

見事、思い通りのマークアップをすることが出来ました！

まず、jQueryのtextメソッドを使ってcontentというクラスの内容を取得しています。そして取得した内容に対してreplaceメソッドを使って、その中の[や]や|という記号をそれぞれ、<span class="red">や</span>や<br>に置き換えています。これがbladeテンプレート内でHTMLタグとして認識され、マークアップ出来たというわけです。

まとめ

　この方法でデータをマークアップすることが出来ますが、マークアップの種類に限りがあること、置き換えられた記号は使うことが出来ないことなど、色々と問題があります。
もっと良い方法があれば教えて頂きたいです！