JavaScript で特定の要素・クラスの内容を HTML エスケープする方法

カテゴリ：JavaScript

以下はクラス名が html の pre 要素内のテキストを HTML エスケープする場合の JavaScript コードの例です。

function escapeHtml(html) {
  return html 
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

$(function(){
  const tag = "pre"; //HTML エスケープする要素
  const cls = "html"; //HTML エスケープするクラス
  return $(`${tag}.${cls}`).each(function(index, element) {
    var str = $(element).html();
    str = escapeHtml(str);
    $(element).html(str);
  })
});

使用例）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function escapeHtml(html) {
  return html 
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

$(function(){
  const tag = "pre"; //HTML エスケープする要素
  const cls = "html"; //HTML エスケープするクラス
  return $(`${tag}.${cls}`).each(function(index, element) {
    var str = $(element).html();
    str = escapeHtml(str);
    $(element).html(str);
  })
});
</script>
</head>
<body>
<pre class="html"><b>エスケープしたいコンテンツ1</b></pre>
<pre class="html"><b>エスケープしたいコンテンツ2</b></pre>
<pre class="cmd"><b>エスケープしないコンテンツ3</b></pre>
</body>
</html>

結果）

公開日時：2025年05月04日 21:17:18
最終更新日時：2025年05月06日 19:14:53