【jQuery】DataTablesで`<sample>`のような文字列をHMTLタグとして認識させずに表示させる方法

概要

jQueryのDataTablesを利用中のサイトで<sample>のような<>で括られた文字列を扱うと、HMTLタグとして認識されてしまい表示されない事象を確認しました。こちらの原因と解決方法を紹介します。

原因

原因は、データを適切にエスケープしていなかったためでした。
jQueryのtextメソッドを使用してデータをエスケープすることができます。

以下、サンプルコードです。

$(document).ready(function() {
    $('#example').DataTable({
        "ajax": {
            "url": "/your-data-url/",
            "dataSrc": ""
        },
        "columns": [
            {
                "data": "sample_data",
                "render": function(data) {
                    return $('<div/>').text(data).html();
                }
            },
            // 他のカラム設定
        ]
    });
});

render関数は、データを表示する前にカスタム処理を行うために使用できます。

return $('<div/>').text(data).html();がjQueryを使用してデータをエスケープしている箇所。
$('<div/>').text(data)は、データをテキストとして<div>要素に設定し、.html()はエスケープされたHTMLを取得します。

これにより、<sample>といった文字列がDatatables上に正常に表示されました。

ちなみに、text()と似たメソッドにhtml()があります。
ただ、

return $('<div/>').html(data).html();

のようにすると、<sample>はDataTablesに表示されませんでした。
これは、html()だとエスケープされずにHTMLタグとして認識するためです。
<p>タグなどを実際にタグ要素として認識させたい場合には活用できます（今回はただの文字列として扱いたいのでtext()の方でOK）。

参考記事

公式ドキュメント