JavaScript で HTML 文字を効果的にエスケープするにはどうすればよいですか?

JavaScript で HTML 文字のエスケープを実行する方法

JavaScript で HTML データを操作する場合、多くの場合、< などの特殊文字をエスケープする必要があります。 ;、>、および & を使用して、マークアップ構文として解釈されないようにします。 PHP はこの目的のために htmlspecialchars と呼ばれるネイティブ関数を提供しますが、JavaScript には直接同等の関数がありません。

HTML 文字エスケープ関数の実装

htmlspecialchars の機能をエミュレートするにはJavaScript では、カスタム関数を作成できます。ただし、可能な場合は組み込み関数を使用することをお勧めします。

ES6 テンプレート リテラル

ES6 では、HTML 文字をエスケープする便利な方法を提供するテンプレート リテラルが導入されました。ただし、この方法では各特殊文字の最初の出現のみがエスケープされるため、同じ文字の複数のインスタンスを含む文字列の結果が正しくなくなります。

カスタム置換関数

To適切なエスケープを確保するには、カスタム置換関数を使用できます。この関数は、各特殊文字を対応する HTML エンティティに置き換えます。

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

文字マップの使用

大きなテキスト ブロックのパフォーマンスを向上させるために、文字マップは特殊文字をより効率的に置換するために使用されます:

function escapeHtml(text) {
  var map = {
    '&': '&',
    '<': '&amp;lt;',
    '>': '&amp;gt;',
    '&quot;': '&amp;quot;',
    "'": '&#039;'
  };
  
  return text.replace(/[&amp;<>&quot;']/g, function(m) { return map[m]; });
}

これらの手法を使用すると、JavaScript で HTML 文字を効果的にエスケープできます。 HTML ドキュメントで正しく表示されることを確認します。

以上がJavaScript で HTML 文字を効果的にエスケープするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。