Do You PHP はてブロ

Do You PHPはてなからはてブロに移動しました

JsRenderチュートリアル - 表示する値のエスケープ処理

JavaScript製でjQuery非依存なテンプレートエンジンであるJsRender/JsViewsを使ったチュートリアルを書いてみようと思います。
以前に書いたエントリJsRender入門 - Do You PHP はてなも参照してください。

今回やること

コンバータを使って表示する値をエスケープ処理する

コード

<html>
<body>

<!-- レンダリング結果を表示するスペース -->
<div id="result"></div>

<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/jsrender.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    // 表示するデータ
    var text = '<h1>"\'&amp;\'"</h1>';

    // テンプレートに名前を付けて登録。
    $.templates({
        linkTemplate: "#template"
    });

    // 名前付きテンプレート"linkTemplate"に変数textを渡し、
    // レンダリング結果を表示
    $('#result').html(
        $.render.linkTemplate(fruits)
    );
});
</script>

<!-- テンプレート -->
<script id="template" type="text/x-jsrender">
    {{!--
      [\x00`&gt;&lt;"'&]にマッチする文字を数値エンティティ、
      もしくは名前付きエンティティに置換
    --}}
    <p>{{html:#data}}</p>

    {{!-- htmlコンバータの省略形 --}}
    <p>{{>#data}}</p>

    {{!-- 属性用コンバータ。処理はhtmlコンバータと同等 --}}
    <p>{{attr:#data}}</p>

    {{!-- encodeURIによるURLエンコード --}}
    <p>{{url:#data}}</p>

    {{!-- コンバータなし --}}
    <p>{{:#data}}</p>
</script>
</body>
</html>

説明

テンプレートで変数を出力する場合、変数名の前に「>」と書いていますが、これがコンバータと呼ばれるものです。コンバータと変数は「:」で区切ります。このコンバータを使うことで、出力する際のエスケープ処理などを行うことができます。
JsRenderには標準で3つのコンバータが用意されています。

種類 記法 省略形 内容
HTMLコンバータ html > [\x00`><"'&]にマッチする文字を数値エンティティ、もしくは名前付きエンティティに置換する。省略形を使用する場合、「:」は不要 {{>#data}}
属性コンバータ attr [\x00`><"'&]にマッチする文字を数値エンティティ、もしくは名前付きエンティティに置換する {{attr:#data}}
URLコンバータ url encodeURIによるURLエンコードを行う {{url:#data}}
コンバータなし エスケープ処理をしない {{:#data}}

JSFiddleで動作を見る