HTMLコードを表示する

トップ > アラカルト > HTMLコードを表示する

概要

HTML のソースコードを <pre> で表示する際、<, >, & を &lt;, &gt;, &amp; にエスケープする必要があり、少々面倒です。そこで、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, '');
  }
})();
表示


Copyright (C) 2017 杜甫々
初版:2017年12月24日 最終更新:2017年12月24日
http://www.tohoho-web.com/ex/html-escape.html