HTML 用の JavaScript でアンパサンドを適切にエンコードするにはどうすればよいですか?

JavaScript でのアンパサンドのエンコード

非表示の入力フィールドから値を取得するときに HTML エンコードが失われるという問題が発生します。入力フィールド内でエンコードされた値が、適切なエンコードなしでテキストボックスに表示されます。これにより、「&」文字が HTML エンティティとしてではなく文字通りに解釈されます。

この問題を解決するには、JavaScript ライブラリまたは jQuery メソッドを使用して文字列をエンコードできます。

DOMParser API

• 新しい DOMParser を作成する
• parseFromString メソッドを使用して HTML 文字列を解析し、新しい Document オブジェクトを作成します。
• 作成されたドキュメントの内部テキストを取得します。これは HTML エンコードされます。

const parser = new DOMParser();
const encodedText = parser.parseFromString('<p>chalk &amp; cheese</p>', 'text/html').documentElement.textContent;

カスタム JavaScript関数

function htmlEncode(value) {
  // Create a temporary textarea element
  const textarea = document.createElement('textarea');
  textarea.textContent = value;
  const encodedValue = textarea.value;

  // Remove the created textarea element
  textarea.remove();

  return encodedValue;
}

使用例

const hiddenValue = $('#hiddenId').attr('value');
const encodedValue = htmlEncode(hiddenValue);
$('#textboxId').val(encodedValue);

以上がHTML 用の JavaScript でアンパサンドを適切にエンコードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。