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() {
  Array.from(document.getElementsByClassName('html-code')).forEach((e) => {
    e.innerHTML = e.innerHTML
    .replace(/<!--|-->/g, '')
    .replace(/<comment>([\s\S]*?)<\/comment>/g, '<!-- $1 -->')
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/^\s+|\s+$/g, '');
  });
})();

表示

初版:2017年12月24日最終更新:2017年12月24日

https://www.tohoho-web.com/how2/html-escape.html