HTMLエスケープとは
以下のように置換するやつ。
| 置換前 | 置換後 |
|---|---|
| & | & |
| < | < |
| > | > |
| " | " |
| ' | ' |
この処理の関数はJavaScriptで1行のコードで作成できる。
1 2 3 4 | const escapeHTML = (str) => typeof str !== 'string' ? str : str.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');const str = `' " & < >`;console.log(escapeHTML(str)); |
IE11だとアロー関数やreplaceAllが使用できないため11行のコードになる。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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などの数値型などの場合はエラーになるので注意が必要。
