キリウ君が読まないノート 作 ▸
特殊文字をエスケープせずにHTMLのソースコードをそのまま表示させる
Caution
静的なファイルでのみ使用できます。ユーザーが入力したテキストのエスケープ目的では使わないでください。
<body> の末尾に以下を追記すればそうなる。ここでは <pre> 直下の <code> のみを対象に処理する。
<script>
document.querySelectorAll('pre > code').forEach(function (elem) {
elem.textContent = elem.innerHTML.trim();
});
</script>例えば以下の <body> を持つHTMLは、本当なら <p> を <p> と書かなければHTMLとして解釈されてしまうのだが、上記のコードを使えばHTMLがそのまま表示されるようになる。
<body>
<pre><code>
<p>ああああああああああああ</p>
<p>いいいいいいいいいいいい</p>
<p>うううううううううううう</p>
</pre></code>
</body>用途としては、HTMLのコードを含む技術文書的なものをHTMLで配布する際、そのためだけに特殊文字をエスケープするのが面倒な場合。すごく限定的。