どうやら、これは私が思っていたよりも見つけるのが難しいようです。そして、それはとてもシンプルです...
JavaScript に組み込まれているPHP のhtmlspecialcharsに相当する関数はありますか? 自分で実装するのはかなり簡単ですが、組み込み関数を使用できる場合は、それを使用する方が簡単です。
PHP に慣れていない人のために説明すると、htmlspecialchars は次のようなものを次のように変換<htmltag/>します。<htmltag/>
私はそれを知ってescape()おり、encodeURI()このようには機能しません。
ソリューション コードに問題があります。各特殊文字の最初の出現のみをエスケープします。例えば：
escapeHtml('Kip\'s <b>evil</b> "test" code\'s here');
Actual: Kip's <b>evil</b> "test" code's here
Expected: Kip's <b>evil</b> "test" code's here
正しく動作するコードは次のとおりです。
function escapeHtml(text) {
return text
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
次のコードは上記と同じ結果を生成しますが、特にテキストの大きなブロックでパフォーマンスが向上します (thanks jbo5112 )。
function escapeHtml(text) {
var map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}
それがHTMLエンコーディングです。これを行うためのネイティブの JavaScript 関数はありませんが、Google で検索して、適切に作成された関数を取得できます。
例http://sanzon.wordpress.com/2008/05/01/neat-little-html-encoding-trick-in-javascript/
編集:
これは私がテストしたものです:
var div = document.createElement('div');
var text = document.createTextNode('<htmltag/>');
div.appendChild(text);
console.log(div.innerHTML);
出力：<htmltag/>
一読の価値あり: http://bigdingus.com/2007/12/29/html-escaping-in-javascript/
escapeHTML: (function() {
var MAP = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
var repl = function(c) { return MAP[c]; };
return function(s) {
return s.replace(/[&<>'"]/g, repl);
};
})()
注: これは 1 回だけ実行してください。&そして、すでにエンコードされた文字列で実行しないでください。&amp;
jQuery を使用すると、次のようになります。
var escapedValue = $('<div/>').text(value).html();
関連する質問からjQueryでHTML文字列をエスケープする
コメントで述べたように、この実装では二重引用符と単一引用符はそのまま残されます。つまり、要素属性を生の HTML 文字列として作成する必要がある場合は、このソリューションを使用しないでください。
Underscore.jsは、このための関数を提供します。
_.escape(string)
&、<、>、"、および ' 文字を置き換えて、HTML に挿入する文字列をエスケープします。
http://underscorejs.org/#escape
これは組み込みの JavaScript 関数ではありませんが、既に Underscore.js を使用している場合、変換する文字列が大きすぎない場合は、独自の関数を作成するよりも優れた代替手段です。
これに対するさらに別の方法は、すべての文字マッピングを完全に放棄し、代わりにすべての不要な文字をそれぞれの数値文字参照に変換することです。たとえば、次のようになります。
function escapeHtml(raw) {
return raw.replace(/[&<>"']/g, function onReplace(match) {
return '&#' + match.charCodeAt(0) + ';';
});
}
指定された RegEx は、OP がエスケープしたい特定の文字のみを処理しますが、エスケープされた HTML が使用されるコンテキストによっては、これらの文字が十分でない場合があることに注意してください。Ryan Grove の記事There's more to HTML escaping than &, <, >, and "は、このトピックに関する優れた読み物です。コンテキストによっては、XSS インジェクションを回避するために次の RegEx が非常に必要になる場合があります。
var regex = /[&<>"'` !@$%()=+{}[\]]/g
OWASP は、「[e]英数字を除き、ASCII 値が 256 未満のすべての文字を&#xHH;フォーマット (または利用可能な場合は名前付きエンティティ) でエスケープして、[an] 属性の切り替えを防ぐ」ことを推奨しています。
したがって、これを行う関数と使用例を次に示します。
function escapeHTML(unsafe) {
return unsafe.replace(
/[\u0000-\u002F\u003A-\u0040\u005B-\u0060\u007B-\u00FF]/g,
c => '&#' + ('000' + c.charCodeAt(0)).slice(-4) + ';'
)
}
document.querySelector('div').innerHTML =
'<span class=' +
escapeHTML('"fakeclass" onclick="alert("test")') +
'>' +
escapeHTML('<script>alert("inspect the attributes")\u003C/script>') +
'</span>'<div></div>関数の安全性を自分で検証するには、私が提供したエンティティ範囲を確認する必要があります。次の正規表現を使用することもできます。これは読みやすく、同じ文字コードをカバーする必要がありますが、私のブラウザーではパフォーマンスが約 10% 低下します。
/(?![0-9A-Za-z])[\u0000-\u00FF]/g
Node.js ユーザー (またはブラウザーで Jade ランタイムを使用するユーザー) の場合、Jade のエスケープ機能を使用できます。
require('jade').runtime.escape(...);
他の誰かがそれを維持している場合、自分で書いても意味がありません。:)
function htmlspecialchars(str) {
if (typeof(str) == "string") {
str = str.replace(/&/g, "&"); /* must do & first */
str = str.replace(/"/g, """);
str = str.replace(/'/g, "'");
str = str.replace(/</g, "<");
str = str.replace(/>/g, ">");
}
return str;
}