HTMLエスケープとは
以下のように置換するやつ。
| 置換前 | 置換後 |
|---|---|
| & | & |
| < | < |
| > | > |
| " | " |
| ' | ' |
この処理の関数はJavaScriptで1行のコードで作成できる。
const escapeHTML = (str) => typeof str !== 'string' ? str : str.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>').replaceAll('"', '"').replaceAll("'", ''');
const str = `' " & < >`;
console.log(escapeHTML(str));
IE11だとアロー関数やreplaceAllが使用できないため11行のコードになる。
function escapeHTML(str) {
if (typeof str !== 'string') {
return str;
} else {
const div = document.createElement('div');
div.innerText = str;
return div.innerHTML
.replace(/"/g, '"')
.replace(/'/g, ''');
}
}
const str = `' " & < >`;
console.log(escapeHTML(str));
型チェックをしていないコードに注意
記載したコードはtypeofで型がstringか確認しているがネット上には型チェックをしていないJavaScriptコードがたくさんある。
replace(replaceAll)メソッドは文字型でないとエラーになってしまう。
文字型のみ処理するようにしないと値が1234などの数値型などの場合はエラーになるので注意が必要。
