HTMLコードを表示する

HTML のソースコードを <pre> で表示する際、<, >, & を <, >, & にエスケープする必要があり、少々面倒です。そこで、JavaScript で HTML のコードをエスケープして表示する小技を紹介します。

コード部分をコメントアウトして文字列化し、エスケープなどの処理を施して表示します。コード内にコメントを記述するには、任意の囲み文字（ここでは <comment>...</comment>）を使用します。

HTML

<pre class="html-code">
<!--
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>helloworld</title>
</head>
<body>
  <h1>helloworld</h1>
  <comment>comment</comment>
</body>
</html>
-->
</pre>

JavaScript

(function() {
  var objs = document.getElementsByClassName('html-code');
  for (var i = 0; i < objs.length; i++) {
    objs[i].innerHTML = objs[i].innerHTML
      .replace(/<!--|-->/g, '')
      .replace(/<comment>([\s\S]*?)<\/comment>/g, '<!-- $1 -->')
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/^\s+|\s+$/g, '');
  }
})();

表示

概要

サンプル