HtmlSpecialChars-Äquivalent in Javascript?

Anscheinend ist dies schwieriger zu finden, als ich gedacht hatte. Und es ist sogar so einfach ...

Gibt es eine Funktion, die den in Javascript integrierten htmlspecialchars von PHP entspricht? Ich weiß, dass es ziemlich einfach ist, dies selbst zu implementieren, aber die Verwendung einer integrierten Funktion, falls verfügbar, ist einfach besser.

Für diejenigen, die mit PHP nicht vertraut sind, übersetzt htmlspecialchars Dinge wie <htmltag/>in<htmltag/>

Ich weiß das escape()und encodeURI()arbeite nicht so.

Es gibt ein Problem mit Ihrem Lösungscode - er wird nur dem ersten Auftreten jedes Sonderzeichens entgehen. Beispielsweise:

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

Hier ist Code, der richtig funktioniert:

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

Aktualisieren

Der folgende Code führt zu identischen Ergebnissen wie der oben beschriebene, bietet jedoch eine bessere Leistung, insbesondere bei großen Textblöcken (danke jbo5112 ).

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

Das ist HTML-Codierung. Es gibt keine native Javascript-Funktion, um dies zu tun, aber Sie können googeln und einige gut gemachte erledigen.

ZB http://sanzon.wordpress.com/2008/05/01/neat-little-html-encoding-trick-in-javascript/

EDIT:
Das habe ich getestet:

var div = document.createElement('div');
  var text = document.createTextNode('<htmltag/>');
  div.appendChild(text);
  console.log(div.innerHTML);

Ausgabe: <htmltag/>

Eine Lektüre wert: 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);
  };
})()

Hinweis : Führen Sie dies nur einmal aus. Und führen Sie es nicht auf bereits kodierten Strings zB &wird&

Mit jQuery kann es so sein:

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

Aus verwandter Frage HTML-Zeichenfolgen mit jQuery entkommen

Wie im Kommentar erwähnt, bleiben doppelte Anführungszeichen und einfache Anführungszeichen für diese Implementierung unverändert. Das bedeutet, dass diese Lösung nicht verwendet werden sollte, wenn Sie ein Elementattribut als rohen HTML-String erstellen müssen.

Hier ist eine Funktion, um HTML zu entkommen:

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

Und zu entschlüsseln:

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 bietet hierfür eine Funktion:

_.escape(string)

Entgeht eine Zeichenfolge zum Einfügen in HTML und ersetzt die Zeichen &, <,>, "und '.

http://underscorejs.org/#escape

Es ist keine integrierte Javascript-Funktion, aber wenn Sie bereits Unterstrich verwenden, ist dies eine bessere Alternative als das Schreiben einer eigenen Funktion, wenn die zu konvertierenden Zeichenfolgen nicht zu groß sind.

Eine weitere Möglichkeit besteht darin, auf die gesamte Zeichenzuordnung insgesamt zu verzichten und stattdessen alle unerwünschten Zeichen in ihre jeweiligen numerischen Zeichenreferenzen umzuwandeln, z.

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

Beachten Sie, dass der angegebene RegEx nur die spezifischen Zeichen verarbeitet, denen das OP entkommen wollte. Abhängig vom Kontext, in dem der maskierte HTML-Code verwendet werden soll, sind diese Zeichen möglicherweise nicht ausreichend. Der Artikel von Ryan Grove Es gibt mehr zu HTML als &, <,> und " ist eine gute Lektüre zu diesem Thema. Abhängig von Ihrem Kontext ist möglicherweise die folgende RegEx erforderlich, um eine XSS-Injektion zu vermeiden:

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

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

Stichprobe :

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

Möglicherweise benötigen Sie eine solche Funktion nicht. Da sich Ihr Code bereits im Browser * befindet, können Sie direkt auf das DOM zugreifen, anstatt HTML zu generieren und zu codieren, das vom Browser rückwärts decodiert werden muss, um tatsächlich verwendet zu werden.

Verwenden Sie die innerTextEigenschaft, um einfachen Text sicher und viel schneller in das DOM einzufügen als mit einer der vorgestellten Escape-Funktionen. Noch schneller als das Zuweisen einer statischen vorcodierten Zeichenfolge innerHTML.

Verwenden Sie classListzum Bearbeiten Klassen, datasetum Satz data-Attribute und setAttributefür andere.

All dies erledigt die Flucht für Sie. Genauer gesagt ist kein Escapezeichen erforderlich und es wird keine Codierung unter ** durchgeführt, da Sie HTML, die Textdarstellung von DOM, umgehen.

// use existing element
var author = 'John "Superman" Doe <[email protected]>';
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>

* Diese Antwort ist nicht für serverseitige JavaScript-Benutzer (Node.js usw. ) gedacht .

** Es sei denn, Sie konvertieren es anschließend explizit in tatsächliches HTML. ZB durch Zugriff innerHTML- dies passiert, wenn Sie $('<div/>').text(value).html();in anderen Antworten vorgeschlagen ausführen . Wenn Ihr letztes Ziel darin besteht, einige Daten in das Dokument einzufügen, erledigen Sie die Arbeit auf diese Weise zweimal. Sie können auch sehen, dass im resultierenden HTML-Code nicht alles codiert ist, sondern nur das Minimum, das erforderlich ist, damit es gültig ist. Dies erfolgt kontextabhängig. Aus diesem Grund codiert diese jQuery-Methode keine Anführungszeichen und sollte daher nicht als Allzweck-Escaper verwendet werden. Das Enthalten von Anführungszeichen ist erforderlich, wenn Sie HTML als Zeichenfolge mit nicht vertrauenswürdigen oder in Anführungszeichen enthaltenden Daten an der Stelle des Attributwerts erstellen. Wenn Sie die DOM-API verwenden, müssen Sie sich überhaupt nicht darum kümmern, zu entkommen.

Für Node.JS-Benutzer (oder Benutzer, die die Jade-Laufzeit im Browser verwenden) können Sie die Escape-Funktion von Jade verwenden.

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

Es macht keinen Sinn, es selbst zu schreiben, wenn jemand anderes es pflegt. :) :)

Ich arbeite ein wenig an der Antwort von okw.

Sie können dafür die DOM-Funktionen des Browsers verwenden.

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

utils.escapeHTML('<escapeThis>&')

Dies kehrt zurück <escapeThis>&

Es verwendet die Standardfunktion createElement, um ein unsichtbares Element zu erstellen, verwendet dann die Funktion textContent, um eine beliebige Zeichenfolge als Inhalt festzulegen und innerHTMLden Inhalt dann in seiner HTML-Darstellung abzurufen.

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;
 }

Hoffe, dass dies das Rennen aufgrund seiner Leistung gewinnt und vor allem keine verkettete Logik mit .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>'));

Umgekehrt:

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

OWASP empfiehlt, dass "[e] außer für alphanumerische Zeichen [Sie sollten] alle Zeichen mit ASCII-Werten unter 256 mit dem &#xHH;Format (oder einer benannten Entität, falls verfügbar) maskieren , um ein Ausschalten des Attributs [an] zu verhindern."

Hier ist eine Funktion, die dies anhand eines Verwendungsbeispiels tut:

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)+';')
}

Diese Lösung verwendet den numerischen Code der Zeichen, der beispielsweise <durch ersetzt wird< .

Obwohl seine Leistung etwas schlechter ist als die Lösung mit einer Karte , hat es die Vorteile:

• Nicht abhängig von einer Bibliothek oder einem DOM
• Ziemlich leicht zu merken (Sie müssen sich die 5 HTML-Escape-Zeichen nicht merken)
• Kleiner Code
• Ziemlich schnell (es ist immer noch schneller als 5 verkettete ersetzen)