JavaScript で HTML 文字をエスケープする例
JavaScript を使用して HTML 特殊文字を必須文字に置き換える組み込みメソッドはありません。通常、カスタム関数を呼び出してその機能を実現し、HTML の事前定義および予約された特殊文字をエスケープします。この記事では、カスタム宣言された関数によって JavaScript を使用してこれらの文字を無視する複数の例について説明します。
JavaScript で HTML 文字列のエスケープ方法の例
以下の HTML ソースコードは、実行時にユーザーから任意の文字列値を取得するためのプレースホルダー付きの From 入力タイプのテキストを示しています。値の挿入中に、フォーム入力のイベントリスナーでカスタム宣言された関数を呼び出します。この関数は、言及された文字を別の指定された文字に変更し、最終的に結果を返します。
変換されたユーザー指定の文字列の結果をブラウザコンソールに表示します。
<!DOCTYPE html>
<html>
<head>
<title>
HTML | Escape HTML Special Chars
</title>
<script type="text/javascript">
</script>
</head>
<body>
<h2>Hi Users Check Escape of HTML Special Chars.</h2>
<Form>
<input style='width:90%; padding:6px;' placeholder='Enter Text With HTML Chars'>
</Form>
<script>
//function to ignore OR escape HTML chars
const escapeHtmlChars = (unsafe) => {
return unsafe.replaceAll('&', '').replaceAll('<', '').replaceAll('>', '').replaceAll('"', '').replaceAll("'", '');
}
// Escape while typing & print result in console
document.querySelector('input').addEventListener('input', e => {
console.clear();
console.log( escapeHtmlChars(e.target.value));
});
</script>
</body>
<html>
この HTML ページのソースでは、Web ページの実行時にユーザーから文字列値を取得するためのフォーム入力タイプのテキストを作成しました。
const 型関数 escapeHtmlChars(string) を見ると、HTML の特殊文字をエスケープして、ユーザーが指定した文字列を変換できます。
そのメソッドの本体では、JavaScript replaceAll(value1,value2) メソッドを使用して、最初の value1 を 2 番目の value2 に置き換えました。
ご存知のとおり、HTML の特殊文字をエスケープしようとしていたので、最初の値に特殊文字（置換する）を渡し、2 番目の値に空の文字列""を渡しました。
上記のように、文字列に対して replaceAll() メソッドを複数回使用すると、変換された文字列も返されます。
document.querySelector('input').addEventListener() のリスナーで escapeHtmlChars() 関数を呼び出しました。ユーザーが入力フォームに値を入力または変更すると、自動的にトリガーされます。
console.log() で関数を呼び出して、ブラウザの検査で戻り値を表示しました。
Web ページにフォーム入力を表示し、HTML 特殊文字を含む文字列を挿入して、コンソールタブに出力を表示するだけです。
JavaScript で HTML 文字をエスケープする別の方法
document.createTextNode(html) を使用して同じ機能を実現することもできます。新しい Text ノードを作成します。このメソッドは、文字列を含む文字を関数に渡すことにより、HTML 文字をエスケープするために使用できます。
次に、appendChild(text) を使用して、変換されたテキストを変数に追加します
function escapeChars(html) {
var text = document.createTextNode(html);
var p = document.createElement('p');
p.appendChild(text);
return p.innerHTML;
}
別のメソッド escapeChars(html) を使用してテキストを変換し、replace() メソッドを使用せずに結果を返しました。