Wie entschlüsseln Sie HTML-Entitäten mit jQuery?

Ohne jQuery:

_function decodeEntities(encodedString) {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = encodedString;
  return textArea.value;
}

console.log(decodeEntities('1 & 2')); // '1 & 2'_

Dies funktioniert ähnlich wie akzeptierte Antwort , ist jedoch bei nicht vertrauenswürdigen Benutzereingaben sicher zu verwenden.

Sicherheitsprobleme bei ähnlichen Ansätzen

Wie von Mike Samuel bemerkt , ist dies mit einem _<div>_ anstelle eines _<textarea>_ mit nicht vertrauenswürdigen Benutzereingaben eine XSS-Sicherheitsanfälligkeit, auch wenn der _<div>_ niemals hinzugefügt wird zum DOM:

_function decodeEntities(encodedString) {
  var div = document.createElement('div');
  div.innerHTML = encodedString;
  return div.textContent;
}

// Shows an alert
decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">')_

Dieser Angriff ist jedoch nicht gegen einen _<textarea>_ möglich, da es keine HTML-Elemente gibt, deren Inhalt in einem <textarea> zulässig ist. Infolgedessen werden alle HTML-Tags, die noch in der codierten Zeichenfolge enthalten sind, vom Browser automatisch entitätscodiert.

_function decodeEntities(encodedString) {
    var textArea = document.createElement('textarea');
    textArea.innerHTML = encodedString;
    return textArea.value;
}

// Safe, and returns the correct answer
console.log(decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">'))_

Warnung : Verwenden Sie dazu die Methoden .html() und .val() von jQuery anstelle von .innerHTML und _.value_ sind für einige jQuery-Versionen ebenfalls unsicher * , auch wenn textarea verwendet wird . Dies liegt daran, dass ältere Versionen von jQuery absichtlich und explizit Skripte auswerten in der Zeichenfolge enthalten wären, die an .html() übergeben wird. Daher zeigt Code wie dieser eine Warnung in jQuery 1.8:

_//<!-- CDATA
// Shows alert
$("<textarea>")
.html("<script>alert(1337);</script>")
.text();

//-->_

_<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>_

_{* Dank an Eru Penkman für das Abfangen dieser Sicherheitsanfälligkeit.}

Wie Mike Samuel sagte, verwenden Sie nicht jQuery.html (). Text (), um HTML-Entitäten zu decodieren, da dies unsicher ist.

Verwenden Sie stattdessen einen Vorlagenrenderer wie Mustache.js oder decodeEntities aus dem Kommentar von @ VyvIT.

Underscore.js Die Utility-Belt-Bibliothek wird mit den Methoden escape und unescape ausgeliefert, sie sind jedoch nicht für Benutzereingaben sicher:

_.escape (string)

_.unescape (string)

Ich denke, Sie verwirren die Text- und HTML-Methoden. Sehen Sie sich dieses Beispiel an. Wenn Sie den inneren HTML-Code eines Elements als Text verwenden, erhalten Sie decodierte HTML-Tags (zweite Schaltfläche). Wenn Sie sie jedoch als HTML verwenden, erhalten Sie die HTML-formatierte Ansicht (erste Schaltfläche).

<div id="myDiv">
    here is a <b>HTML</b> content.
</div>
<br />
<input value="Write as HTML" type="button" onclick="javascript:$('#resultDiv').html($('#myDiv').html());" />
&nbsp;&nbsp;
<input value="Write as Text" type="button" onclick="javascript:$('#resultDiv').text($('#myDiv').html());" />
<br /><br />
<div id="resultDiv">
    Results here !
</div>

Erste Schaltfläche schreibt: Hier ist ein HTML Inhalt. 

Die Taste second schreibt: Hier ist ein <B> HTML </ B> -Inhalt. 

Übrigens können Sie ein Plug-in sehen, das ich in jQuery plugin - HTML decode und encodegefunden habe, das HTML-Strings codiert und decodiert.

Die Frage wird durch 'mit jQuery' begrenzt, aber es kann für einige hilfreich sein, zu wissen, dass der in der besten Antwort angegebene jQuery-Code die folgenden Informationen enthält.

function decodeEntities(input) {
  var y = document.createElement('textarea');
  y.innerHTML = input;
  return y.value;
}

Sie können die ie Bibliothek verwenden, die unter https://github.com/mathiasbynens verfügbar ist/he

Beispiel:

console.log(he.decode("Jörg &amp Jürgen rocked to & fro "));
// Logs "Jörg & Jürgen rocked to & fro"

Ich forderte den Autor der Bibliothek heraus auf die Frage, ob es einen Grund gab, diese Bibliothek im clientseitigen Code zugunsten des in andere Antworten bereitgestellten <textarea> - Hacks zu verwenden hier und anderswo. Er lieferte einige mögliche Begründungen:

• Wenn Sie node.js serverseitig verwenden, erhalten Sie durch die Verwendung einer Bibliothek für die HTML-Codierung/-Decodierung eine einzige Lösung, die sowohl clientseitig als auch serverseitig funktioniert.

• Die Entitätsdecodierungsalgorithmen einiger Browser weisen Fehler auf oder es fehlt die Unterstützung für einige benannte Zeichenreferenzen . Beispielsweise dekodiert und rendert Internet Explorer nicht unterbrechende Leerzeichen ( ) Korrekt, meldet sie jedoch als normale Leerzeichen anstelle von nicht unterbrechenden Leerzeichen über die innerText -Eigenschaft eines DOM-Elements und unterbricht die <textarea> Hack (wenn auch nur in geringem Umfang). Zusätzlich IE 8 und 9 einfach nicht unterstützt eine der in HTML 5 hinzugefügten neuen benannten Zeichenreferenzen. Der Autor von he hostet auch einen Test zur Unterstützung von Verweisen auf benannte Zeichen unter http://mathias.html5.org/tests/html/named-character-references/ . In IE 8, es meldet über tausend Fehler.

  Wenn Sie vor Browserfehlern im Zusammenhang mit der Entitätsdekodierung isoliert sein und/oder die gesamte Palette der benannten Zeichenverweise verarbeiten möchten, können Sie den Hack <textarea> Nicht umgehen. Du brauchst eine Bibliothek wie er .

• Er hat einfach das verdammt gute Gefühl, Dinge auf diese Weise zu erledigen, ist weniger hackig.

kodieren:

$("<textarea/>").html('<a>').html();      // return '&lt;a&gt'

dekodieren:

$("<textarea/>").html('&lt;a&gt').val()   // return '<a>'

Benutzen

myString = myString.replace( /\&/g, '&' );

Es ist am einfachsten, dies auf der Serverseite zu tun, da JavaScript anscheinend weder eine native Bibliothek für die Behandlung von Entitäten enthält, noch habe ich nahe der Suchergebnisse in den verschiedenen Frameworks gefunden, die JavaScript erweitern. 

Suchen Sie nach "JavaScript-HTML-Entitäten". Möglicherweise finden Sie ein paar Bibliotheken zu diesem Zweck. Diese werden jedoch wahrscheinlich alle um die oben genannte Logik herum aufgebaut - Ersetzen, Entität für Entität.

Sie müssen eine benutzerdefinierte Funktion für HTML-Entitäten erstellen:

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

Ich musste nur ein HTML-Entity-Zeichen (⇓) als Wert für eine HTML-Schaltfläche haben. Der HTML-Code sieht im Browser von Anfang an gut aus:

<input type="button" value="Embed & Share  &dArr;" id="share_button" />

Jetzt fügte ich einen Toggle hinzu, der auch den Charakter anzeigen sollte. Das ist meine Lösung

$("#share_button").toggle(
    function(){
        $("#share").slideDown();
        $(this).attr("value", "Embed & Share " + $("<div>").html("&uArr;").text());
    }

Dies zeigt wieder ⇓ in der Schaltfläche. Ich hoffe das kann jemandem helfen.

Alternativ gibt es auch eine Bibliothek dafür ..

hier, https://cdnjs.com/libraries/he

npm install he                 //using node.js

<script src="js/he.js"></script>  //or from your javascript directory

Die Verwendung ist wie folgt ... 

//to encode text 
he.encode('© Ande & Nonso® Company LImited 2018');  

//to decode the 
he.decode('© Ande & Nonso® Company Limited 2018');

prost.

Hier gibt es noch ein Problem: Escape-Zeichenfolge sieht nicht lesbar aus, wenn sie dem Eingabewert zugewiesen wird

var string = _.escape("<img src=fake onerror=alert('boo!')>");
$('input').val(string);

Beispiel: https://jsfiddle.net/kjpdwmqa/3/

Erweitern Sie eine String-Klasse:

String::decode = ->
  $('<textarea />').html(this).text()

und als Methode verwenden:

"<img src='myimage.jpg'>".decode()

Versuche dies :

var htmlEntities = "<script>alert('hello');</script>";
var htmlDecode =$.parseHTML(htmlEntities)[0]['wholeText'];
console.log(htmlDecode);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

parseHTML ist eine Funktion in der Jquery-Bibliothek und gibt ein Array zurück, das einige Details zum angegebenen String enthält.

in einigen Fällen ist der String groß, sodass die Funktion den Inhalt in viele Indizes aufteilt.

und um alle Indexdaten zu erhalten, sollten Sie zu einem beliebigen Index gehen und dann auf den Index "wholeText" zugreifen.

Ich habe den Index 0 gewählt, weil er in allen Fällen funktioniert (kleiner oder großer String).

Wenn Sie für ExtJS-Benutzer bereits über die codierte Zeichenfolge verfügen, z. B. wenn der zurückgegebene Wert einer Bibliotheksfunktion der innerHTML-Inhalt ist, sollten Sie diese ExtJS-Funktion berücksichtigen:

Ext.util.Format.htmlDecode(innerHtmlContent)

Angenommen, Sie haben unterhalb von String.

Unsere Deluxe-Kabinen sind warm und gemütlich. gemütlich

var str = $("p").text(); // get the text from <p> tag
$('p').html(str).text();  // Now,decode html entities in your variable i.e 

str und wieder zuweisen 

Etikett.

das ist es.