preタグの中身をエスケープする

スタイルガイドを自作している時に、JavaScriptを使ってpreタグの中身を自動でエスケープする方法を試してみました。

サンプルコード

今回は.sg-preの中の < と > をエスケープします。

HTML

<pre class="sg-pre">
<div class="wrapper">
  <div class="inner">sample</div>
</div></pre>

JavaScript

(function() {
	var preTag = document.getElementsByClassName('sg-pre');
	for (var i = 0; i < preTag.length; i++) {
		var after = preTag[i].innerHTML.replace(/</g, '&lt;').replace(/>/g, '&gt;');
		preTag[i].innerHTML = after;
	}
})();

preタグの中身をエスケープするデモページ