preタグ内のHTMLはエスケープが必要
コードをサイト内に記載して表示する際にはpreタグが良く利用される。
preタグ内に記述すればインデントも反映されるため便利だがHTMLの場合はそのまま記述するとページ上に表示されるHTMLコードとして表示されてしまうため例えば<br>などは<br>のようにエスケープする必要が生じる。
悪い例 brタグのコードが改行になっている
foo bar
良い例 brタグのコードが表示されている
foo<br>bar
JavaScriptでpreタグ内をエスケープ
下記のようにコードpreタグ内のHTMLを取得して置換するとHTMLエンティティにエスケープする手間がなくなる。
preタグ内の更新頻度が高い場合やエスケープが面倒な場合はこちらの方法がおすすめ。
var escapeHtml = (function (String) { var escapeMap = { '&': '&', "'": ''', '`': '`', '"': '"', '<': '<', '>': '>' }; 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); }