48

重複の可能性:
HTML をエスケープする方法

JavaScriptで文字列をHTMLに変換するにはどうすればよいですか?

例えば

var unsafestring = "<oohlook&atme>";
var safestring = magic(unsafestring);

今どこにsafestring等しい"&lt;ohhlook&amp;atme&gt;"

を探していmagic(...)ます。私はJQueryを使用していませんmagic

4

5 に答える 5

73
function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

それで、var unsafestring = "<oohlook&atme>";あなたと一緒に使用しますhtmlEntities(unsafestring);

于 2013-01-02T22:09:20.043 に答える
37

エンコーディングを気にしないでください。代わりにテキスト ノードを使用してください。テキストノードのデータは、テキストとして扱われることが保証されています。

document.body.appendChild(document.createTextNode("Your&funky<text>here"))
于 2013-01-02T22:17:52.547 に答える
34

自分でライブラリを使用するのではなく、ライブラリを使用する場合:

最も一般的に使用される方法は、この目的でjQueryを使用することです。

var safestring = $('<div>').text(unsafestring).html();

すべてのHTMLエンティティをエンコードする場合は、ライブラリを使用するか、自分で作成する必要があります。

HTMLエンコーダーやデコードなど、jQueryよりもコンパクトなライブラリを使用できます

于 2013-01-02T22:08:10.103 に答える
15

と をエスケープする必要が<あり&ます。エスケープ>も問題ありません。

function magic(input) {
    input = input.replace(/&/g, '&amp;');
    input = input.replace(/</g, '&lt;');
    input = input.replace(/>/g, '&gt;');
    return input;
}

または、DOM エンジンに面倒な作業を任せます (私は怠け者なので jQuery を使用します)。

function magic(input) {
    return $('<span>').text(input).html();
}

これが行うことは、ダミー要素を作成し、文字列をそのtextContentとして割り当てることです(つまり、HTML 固有の文字は単なるテキストであるため、副作用はありません)。次に、その要素の HTML コンテンツを取得します。これはテキストですが、特殊文字が変換されています。必要に応じて HTML エンティティに。

于 2013-01-02T22:10:50.267 に答える
-5

エスケープが必要な唯一の文字はです<。(>タグの外では意味がありません)。

したがって、「魔法の」コードは次のとおりです。

safestring = unsafestring.replace(/</g,'&lt;');
于 2013-01-02T22:06:46.600 に答える