JavaScriptでHtmlSpecialCharsと同等ですか？

どうやら、これは私が思っていたよりも見つけるのが難しいです。そしてそれはとても簡単です...

JavaScriptに組み込まれたPHPのhtmlspecialcharsに相当する関数はありますか？それを自分で実装するのはかなり簡単ですが、組み込み関数を使用できる場合はそれを使用する方が優れています。

PHPに慣れていない人のために、はhtmlspecialcharsは次のようなものを翻訳<htmltag/>へ<htmltag/>

私はそれを知ってescape()おり、encodeURI()このように動作しません。

ソリューションコードに問題があります-特殊文字の最初の出現のみをエスケープします。例えば：

escapeHtml('Kip\'s <b>evil</b> "test" code\'s here');
Actual:   Kip&#039;s &lt;b&gt;evil</b> &quot;test" code's here
Expected: Kip&#039;s &lt;b&gt;evil&lt;/b&gt; &quot;test&quot; code&#039;s here

正しく機能するコードは次のとおりです。

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

更新

次のコードは上記と同じ結果を生成しますが、特にテキストの大きなブロックでより良いパフォーマンスを発揮します（jbo5112に感謝）。

function escapeHtml(text) {
  var map = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };
  
  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

それがHTMLエンコーディングです。それを行うためのネイティブのjavascript関数はありませんが、グーグルしていくつかの機能をうまく実行できます。

例：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 = {
   '&': '&',
   '<': '&lt;',
   '>': '&gt;',
   '"': '&#34;',
   "'": '&#39;'
 };
  var repl = function(c) { return MAP[c]; };
  return function(s) {
    return s.replace(/[&<>'"]/g, repl);
  };
})()

注：これは一度だけ実行してください。そして、例えば、既にエンコードされた文字列でそれを実行しない&となり&

jQueryでは、次のようになります。

var escapedValue = $('<div/>').text(value).html();

関連する質問からjQueryでHTML文字列をエスケープする

コメントで述べたように、この実装では二重引用符と単一引用符はそのまま残されます。つまり、要素属性を未加工のHTML文字列として作成する必要がある場合は、このソリューションを使用しないでください。

HTMLをエスケープする関数は次のとおりです。

function escapeHtml(str)
{
    var map =
    {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return str.replace(/[&<>"']/g, function(m) {return map[m];});
}

そしてデコードする：

function decodeHtml(str)
{
    var map =
    {
        '&': '&',
        '&lt;': '<',
        '&gt;': '>',
        '&quot;': '"',
        '&#039;': "'"
    };
    return str.replace(/&amp;|&lt;|&gt;|&quot;|&#039;/g, function(m) {return map[m];});
}

Underscore.jsは、このための関数を提供します。

_.escape(string)

HTMLに挿入するために文字列をエスケープし、＆、<、>、 "、および '文字を置き換えます。

http://underscorejs.org/#escape

これは組み込みのJavaScript関数ではありませんが、すでにUnderscoreを使用している場合は、変換する文字列が大きすぎない場合は、独自の関数を作成するよりも優れています。

これに関するさらに別の見方は、すべての文字マッピングを完全に無視し、代わりにすべての不要な文字をそれぞれの数字参照に変換することです。たとえば、次のようになります。

function escapeHtml(raw) {
    return raw.replace(/[&<>"']/g, function onReplace(match) {
        return '&#' + match.charCodeAt(0) + ';';
    });
}

注指定した正規表現が唯一のOPを脱出したかったが、HTMLが使用されようとしている、これらの文字が十分でないかもしれないエスケープという文脈に依存する特定の文字を処理します。Ryan Groveの記事HTMLエスケープには＆、<、>、および "以外にも多くのトピックがあります。また、コンテキストによっては、XSSインジェクションを回避するために次のRegExが非常に必要になる場合があります。

var regex = /[&<>"'` !@$%()=+{}[\]]/g

String.prototype.escapeHTML = function() {
        return this.replace(/&/g, "&")
                   .replace(/</g, "&lt;")
                   .replace(/>/g, "&gt;")
                   .replace(/"/g, "&quot;")
                   .replace(/'/g, "&#039;");
    }

サンプル ：

var toto = "test<br>";
alert(toto.escapeHTML());

おそらく、そのような関数は必要ありません。コードはすでにブラウザーにあるため*、ブラウザーで逆方向にデコードして実際に使用する必要があるHTMLを生成してエンコードする代わりに、直接DOMにアクセスできます。

innerTextプロパティを使用すると、プレーンテキストをDOMに安全かつ迅速に挿入できます。提示されたエスケープ関数を使用するよりもはるかに高速です。静的な事前エンコードされた文字列をに割り当てるよりもさらに高速ですinnerHTML。

classListクラスの編集、属性のdataset設定などに使用します。data-setAttribute

これらはすべてエスケープを処理します。より正確には、DOMのテキスト表現であるHTMLに取り組んでいるため、エスケープは不要であり、**の下でエンコードは実行されません。

// use existing element
var author = 'John "Superman" Doe <john@example.com>';
var el = document.getElementById('first');
el.dataset.author = author;
el.textContent = 'Author: '+author;

// or create a new element
var a = document.createElement('a');
a.classList.add('important');
a.href = '/search?q=term+"exact"&n=50';
a.textContent = 'Search for "exact" term';
document.body.appendChild(a);

// actual HTML code
console.log(el.outerHTML);
console.log(a.outerHTML);

.important { color: red; }

<div id="first"></div>

*この回答はサーバーサイドJavaScriptユーザー（Node.js など）を対象としたものではありません

**後で明示的に実際のHTMLに変換しない限り。たとえばアクセスすることによってinnerHTML-これは$('<div/>').text(value).html();、他の回答で提案された実行すると何が起こるかです。したがって、最終的な目標がドキュメントにデータを挿入することである場合、この方法でこれを行うと、作業が2回行われます。また、結果のHTMLではすべてがエンコードされているわけではなく、有効であるために必要な最小限のものだけがエンコードされていることがわかります。これはコンテキストに依存して行われます。そのため、このjQueryメソッドは引用符をエンコードしないため、汎用エスケープとして使用しないでください。属性の値の場所に信頼できないデータまたは引用符を含むデータを含む文字列としてHTMLを構築する場合は、引用符のエスケープが必要です。DOM APIを使用する場合は、エスケープを気にする必要はありません。

Node.JSユーザー（またはブラウザーでJadeランタイムを使用しているユーザー）には、Jadeのエスケープ機能を使用できます。

require('jade').runtime.escape(...);

誰かがそれを維持しているなら、自分でそれを書く意味はありません。:)

okwの回答について少し詳しく説明します。

そのためにブラウザーのDOM関数を使用できます。

var utils = {
    dummy: document.createElement('div'),
    escapeHTML: function(s) {
        this.dummy.textContent = s
        return this.dummy.innerHTML
    }
}

utils.escapeHTML('<escapeThis>&')

これは戻ります <escapeThis>&

標準の関数createElementを使用して非表示の要素を作成し、関数textContentを使用して任意の文字列をコンテンツとして設定しinnerHTML、コンテンツをHTML表現で取得します。

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, "&lt;");
  str = str.replace(/>/g, "&gt;");
  }
 return str;
 }

これがそのパフォーマンスと最も重要なのは、.replace（ '＆'、 '＆'）。replace（ '<'、 '<'）...

var mapObj = {
   '&':"&",
   '<':"&lt;",
   '>':"&gt;",
   '"':"&quot;",
   '\'':"&#039;"
};
var re = new RegExp(Object.keys(mapObj).join("|"),"gi");

function escapeHtml(str) 
{   
    return str.replace(re, function(matched)
    {
        return mapObj[matched.toLowerCase()];
    });
}

console.log('<script type="text/javascript">alert('Hello World');</script>');
console.log(escapeHtml('<script type="text/javascript">alert('Hello World');</script>'));

反転したもの：

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

OWASPは、「[e]英数字を除い&#xHH;て、[an]属性からの切り替えを防ぐために、フォーマット（または使用可能な場合は名前付きエンティティ）で256未満のASCII値を持つすべての文字をエスケープすることをお勧めします。

それで、これを行う関数を使用例とともに示します。

function escapeHTML(unsafe) {
  return unsafe.replace(
    /[\u0000-\u002F]|[\u003A-\u0040]|[\u005B-\u00FF]/g,
    c => '&#' + ('000' + c.charCodeAt(0)).substr(-4, 4) + ';'
  )
}
document.querySelector('div').innerHTML =
  '<span class=' +
  escapeHTML('this should break it! " | / % * + , - / ; < = > ^') +
  '>' +
  escapeHTML('<script>alert("inspect the attributes")\u003C/script>') +
  '</span>'

<div></div>

function htmlEscape(str){
    return str.replace(/[&<>'"]/g,x=>'&#'+x.charCodeAt(0)+';')
}

このソリューションでは、文字の数値コードを使用<し<ます。たとえば、はに置き換えられます。

そのパフォーマンスは、マップを使用するソリューションよりも若干劣りますが、次のような利点があります。

• ライブラリまたはDOMに依存しない
• 覚えやすい（5つのHTMLエスケープ文字を覚える必要がない）
• 小さなコード
• かなり高速（5つの連鎖置換よりも高速です）