preタグ内にHTMLを入れてJavaScriptでエスケープすると便利

preタグ内のHTMLはエスケープが必要

コードをサイト内に記載して表示する際にはpreタグが良く利用される。

preタグ内に記述すればインデントも反映されるため便利だがHTMLの場合はそのまま記述するとページ上に表示されるHTMLコードとして表示されてしまうため例えば<br>などは&lt;br&gt;のようにエスケープする必要が生じる。

悪い例 brタグのコードが改行になっている

foo
bar

良い例 brタグのコードが表示されている

foo<br>bar

JavaScriptでpreタグ内をエスケープ

下記のようにコードpreタグ内のHTMLを取得して置換するとHTMLエンティティにエスケープする手間がなくなる。

preタグ内の更新頻度が高い場合やエスケープが面倒な場合はこちらの方法がおすすめ。

var escapeHtml = (function (String) {
  var escapeMap = {
    '&': '&',
    "'": ''',
    '`': '`',
    '"': '"',
    '<': '&lt;',
    '>': '&gt;'
  };
  var escapeReg = '[';
  var reg;
  for (var p in escapeMap) {
    if (escapeMap.hasOwnProperty(p)) {
      escapeReg += p;
    }
  }
  escapeReg += ']';
  reg = new RegExp(escapeReg, 'g');
  return function escapeHtml (str) {
    str = (str === null || str === undefined) ? '' : '' + str;
    return str.replace(reg, function (match) {
      return escapeMap[match];
    });
  };
}(String));
var pre = document.querySelectorAll('pre');
for(var i = 0; i < pre.length; i++) {
  pre[i].innerHTML = escapeHtml(pre[i].innerHTML);
}

JavaScriptでpreタグ内をエスケープしたサンプル