JavaScriptでHTMLの特殊文字をエスケープできますか？

JavaScript機能でHTMLにテキストを表示したい。JSでHTML特殊文字をエスケープするにはどうすればよいですか？APIはありますか？

function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
 }

jQueryの.text()関数を使用できます。

例えば：

http://jsfiddle.net/9H6Ch/

.text()関数に関するjQueryドキュメントから：

このメソッドは、HTMLで正しくレンダリングされるように、必要に応じて提供された文字列をエスケープすることに注意する必要があります。そのためには、DOMメソッド.createTextNode（）を呼び出し、文字列をHTMLとして解釈しません。

jQueryドキュメントの以前のバージョンでは、次のように表現されています（強調が追加されています）。

このメソッドは、HTMLで正しくレンダリングされるように、必要に応じて提供された文字列をエスケープすることに注意する必要があります。そのためには、DOMメソッド.createTextNode（）を呼び出します。このメソッドは、特殊文字を同等のHTMLエンティティ（＆lt; for <など）に置き換えます。

私はそれを行う適切な方法を見つけたと思います...

// Create a DOM Text node:
var text_node = document.createTextNode(unescaped_text);

// Get the HTML element where you want to insert the text into:
var elem = document.getElementById('msg_span');

// Optional: clear its old contents
//elem.innerHTML = '';

// Append the text node into it:
elem.appendChild(text_node);

lodashの使用

_.escape('fred, barney, & pebbles');
// => 'fred, barney, & pebbles'

ソースコード

これは、私が見た中で最速の方法です。さらに、ページの要素を追加、削除、または変更せずにすべてを実行します。

function escapeHTML(unsafeText) {
    let div = document.createElement('div');
    div.innerText = unsafeText;
    return div.innerHTML;
}

より良い解決策を見つけることは興味深いことでした：

var escapeHTML = function(unsafe) {
  return unsafe.replace(/[&<"']/g, function(m) {
    switch (m) {
      case '&':
        return '&amp;';
      case '<':
        return '&lt;';
      case '"':
        return '&quot;';
      default:
        return '&#039;';
    }
  });
};

>結果のXML / HTMLコードを壊さないため、解析しません。

ベンチマークは次のとおりです。http：//jsperf.com/regexpairs また、ユニバーサルを作成しましたescape関数：http : //jsperf.com/regexpairs2

エンコードされていないテキストを表示する最も簡潔で高性能な方法は、textContentプロパティを使用することです。

を使用するよりも高速ですinnerHTML。そして、それはオーバーヘッドのエスケープを考慮に入れていません。

document.body.textContent = 'a <b> c </b>';

DOM要素はinnerTextに割り当てることでテキストをHTMLに変換することをサポートします。innerTextは関数ではありませんが、それに割り当てると、テキストがエスケープされたかのように機能します。

document.querySelectorAll('#id')[0].innerText = 'unsafe " String >><>';

文字列のすべての文字をエンコードできます。

function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}

または、次のように、心配するメインキャラクター（＆、inebreak、<、>、 "、 '）をターゲットにします。

function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}

test.value=encode('How to encode\nonly html tags &<>\'" nice & fast!');

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/

<textarea id=test rows="9" cols="55">&#119;&#119;&#119;&#46;&#87;&#72;&#65;&#75;&#46;&#99;&#111;&#109;</textarea>

ワンライナー（ES6 +用）：

var escapeHtml = s => (s + '').replace(/[&<>"']/g, m => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;',
    '"': '&quot;', "'": '&#39;'
})[m]);

古いバージョンの場合：

function escapeHtml(s) {
    return (s + '').replace(/[&<>"']/g, function (m) {
        return ({
            '&': '&amp;', '<': '&lt;', '>': '&gt;',
            '"': '&quot;', "'": '&#39;'
        })[m];
    });
}

DOM構造を構築するときにこの問題に遭遇しました。この質問は私がそれを解決するのに役立ちました。パスの区切り記号としてダブルシェブロンを使用したかったのですが、新しいテキストノードを直接追加すると、文字自体ではなく、エスケープされた文字コードが表示されました。

var _div = document.createElement('div');
var _separator = document.createTextNode('»');
//_div.appendChild(_separator); /* this resulted in '»' being displayed */
_div.innerHTML = _separator.textContent; /* this was key */

アプリですでにモジュールを使用している場合は、escape-htmlモジュールを使用できます。

import escapeHtml from 'escape-html';
const unsafeString = '<script>alert("XSS");</script>';
const safeString = escapeHtml(unsafeString);

prototype.jsライブラリを使用してこれを試してください：

string.escapeHTML();

デモを試す

私はこの解決策を思いつきました。

ユーザーまたはデータベースからの安全でないデータを含む要素にhtmlを追加するとします。

var unsafe = 'some unsafe data like <script>alert("oops");</script> here';

var html = '';
html += '<div>';
html += '<p>' + unsafe + '</p>';
html += '</div>';

element.html(html);

XSS攻撃に対して安全ではありません。これを追加します。

$(document.createElement('div')).html(unsafe).text();

そうです

var unsafe = 'some unsafe data like <script>alert("oops");</script> here';

var html = '';
html += '<div>';
html += '<p>' + $(document.createElement('div')).html(unsafe).text(); + '</p>';
html += '</div>';

element.html(html);

私にとって、これは使用するよりもはるかに簡単で、.replace()削除されます!!! 可能なすべてのhtmlタグ（希望）。