【JavaScript】Handlebars.jsのHTMLエスケープを解除する方法

handlebarsjs-2
Handlebars.jsのHTMLエスケープを解除する方法を解説していきます。
もっと簡単にいえば、<h1>をブラウザ上で文字としてではなく、タグとして表示させるための方法です。

[スポンサーリンク]

このページでやること

HTMLエスケープを解除する方法を解説します。

HTMLエスケープが有効になるケース

例えば、以下のようにHTMLタグを含んだ変数をHandlebars.jsで展開した場合、HTMLタグが文字列として表示されます。
これはテンプレート内で、変数展開時に{{}}のように{}を2つずつ使えばエスケープされます。

function createTemplate(){
    var value = {
            val: '<h1>これはテストです</h1>'
            };
    template = Handlebars.compile($('#template').html());
    $('#display').html(template(value));}

こちらがテンプレートです。

<script id="template" type="text/x-handlebars-template">
{{val}}
</script>

デモ

実際に動かすことが出来ます

HTMLエスケープを解除する方法

これはテンプレート内の変数展開時で、{{{}}}のように、{}を3つずつ使えばエスケープは解除されます。

<script id="template" type="text/x-handlebars-template">
{{{val}}}
</script>

デモ

こちらで実際に動かすことが出来ます。
実際に動かすことが出来ます

さいごに

{}の数が違うだけで、エスケープ有効・解除ができるのでととっても便利です。
Handlebars.jsは他にも色々便利な機能が満載で個人的には好きなライブラリです。ぜひ使ってみてください!
それでは!