HTML-Zeichenfolgen mit jQuery umbrechen

Question

Kennt jemand eine einfache Möglichkeit, HTML aus Strings in jQuery ? Ich muss in der Lage sein, eine beliebige Zeichenfolge zu übergeben und haben es richtig für die Anzeige in einer HTML-Seite (Verhinderung von JavaScript/HTML-Injection-Angriffe) escaped. Ich bin sicher, es ist möglich, jQuery zu erweitern, um dies zu tun, aber ich weiß nicht genug über das Framework im Moment, um dies zu erreichen.

Answer 1

Ich habe eine winzig kleine Funktion geschrieben, die dies tut. Sie entkommt nur " , & , < y > (aber das ist in der Regel auch alles, was man braucht). Sie ist etwas eleganter als die früher vorgeschlagenen Lösungen, da sie nur eine .replace() um die gesamte Konvertierung durchzuführen. ( EDIT 2: Die Komplexität des Codes wurde reduziert, so dass die Funktion noch kleiner und übersichtlicher ist (falls Sie sich für den Originalcode interessieren, siehe Ende dieser Antwort).

function escapeHtml(text) {
    'use strict';
    return text.replace(/[\"&<>]/g, function (a) {
        return { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' }[a];
    });
}

Dies ist einfaches Javascript, kein jQuery verwendet.

Die Flucht / y ' zu

Bearbeiten als Antwort auf mklement Kommentar.

Die obige Funktion kann leicht erweitert werden, um jedes beliebige Zeichen einzubeziehen. Wenn Sie mehr Zeichen angeben möchten, die entkommen sollen, fügen Sie sie einfach beide in die Zeichenklasse des regulären Ausdrucks ein (d. h. innerhalb der /[...]/g ) und als Eintrag in der chr Objekt. ( EDIT 2: Auch diese Funktion wurde auf die gleiche Weise verkürzt).

function escapeHtml(text) {
    'use strict';
    return text.replace(/[\"&'\/<>]/g, function (a) {
        return {
            '"': '&quot;', '&': '&amp;', "'": '&#39;',
            '/': '&#47;',  '<': '&lt;',  '>': '&gt;'
        }[a];
    });
}

Beachten Sie die obige Verwendung von ' für Hochkomma (die symbolische Einheit ' hätte stattdessen verwendet werden können - es ist in XML definiert, war aber ursprünglich nicht in der HTML-Spezifikation enthalten und wird daher möglicherweise nicht von allen Browsern unterstützt. Siehe: Wikipedia-Artikel über HTML-Zeichenkodierungen ). Ich erinnere mich auch, irgendwo gelesen zu haben, dass die Verwendung von dezimalen Entitäten besser unterstützt wird als die Verwendung von hexadezimalen, aber ich kann die Quelle dafür nicht mehr finden. (Und es kann nicht viele Browser da draußen sein, die die hexadezimalen Entitäten nicht unterstützen).

Nota: Hinzufügen von / y ' in die Liste der escapeten Zeichen aufzunehmen, ist nicht sehr nützlich, da sie in HTML keine besondere Bedeutung haben und nicht necesito zu entkommen.

Original escapeHtml Funktion

EDIT 2: Die ursprüngliche Funktion verwendete eine Variable ( chr ), um das Objekt zu speichern, das für die .replace() Rückruf. Diese Variable benötigte außerdem eine zusätzliche anonyme Funktion, um sie in den Anwendungsbereich zu bringen, was die Funktion (unnötigerweise) ein wenig größer und komplexer machte.

var escapeHtml = (function () {
    'use strict';
    var chr = { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' };
    return function (text) {
        return text.replace(/[\"&<>]/g, function (a) { return chr[a]; });
    };
}());

Ich habe nicht getestet, welche der beiden Versionen schneller ist. Wenn Sie das tun, können Sie hier gerne Informationen und Links dazu hinzufügen.

Answer 2

Ich merke, wie spät ich zu dieser Partei bin, aber ich habe eine sehr einfache Lösung, die nicht jQuery erfordert.

escaped = new Option(unescaped).innerHTML;

Bearbeiten: Anführungszeichen werden nicht escaped. Der einzige Fall, in dem Anführungszeichen escaped werden müssen, ist, wenn der Inhalt inline in ein Attribut innerhalb eines HTML-Strings eingefügt werden soll. Es fällt mir schwer, mir einen Fall vorzustellen, in dem dies ein gutes Design wäre.

Edit 3: Die schnellste Lösung findest du in der obigen Antwort von Saram. Diese ist die kürzeste.

Answer 3

Nach letzten Tests kann ich empfehlen schnellste und vollständig Cross-Browser kompatibel natives JavaScript (DOM) Lösung:

function HTMLescape(html){
    return document.createElement('div')
        .appendChild(document.createTextNode(html))
        .parentNode
        .innerHTML
}

Wenn Sie es viele Male wiederholen, können Sie es mit einmal vorbereiteten Variablen machen:

//prepare variables
var DOMtext = document.createTextNode("test");
var DOMnative = document.createElement("span");
DOMnative.appendChild(DOMtext);

//main work for each case
function HTMLescape(html){
  DOMtext.nodeValue = html;
  return DOMnative.innerHTML
}

Sehen Sie sich meine letzte Leistung an Vergleich ( Stapelfrage ).

Answer 4

Hier ist eine saubere, klare JavaScript-Funktion. Sie wandelt Text wie "ein paar < viele" in "ein paar < viele" um.

function escapeHtmlEntities (str) {
  if (typeof jQuery !== 'undefined') {
    // Create an empty div to use as a container,
    // then put the raw text in and get the HTML
    // equivalent out.
    return jQuery('<div/>').text(str).html();
  }

  // No jQuery, so use string replace.
  return str
    .replace(/&/g, '&amp;')
    .replace(/>/g, '&gt;')
    .replace(/</g, '&lt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&apos;');
}

Answer 5

Versuchen Sie Underscore.string lib, es funktioniert mit jQuery.

_.str.escapeHTML('<div>Blah blah blah</div>')

Ausgabe:

'<div>Blah blah blah</div>'