Umwandlung von Zeichen in HTML-Entities mit einfachem JavaScript

Question

Ich habe die folgenden:

var text = "Übergroße Äpfel mit Würmern";

Ich bin auf der Suche nach einer Javascript-Funktion, die den Text so umwandelt, dass jeder Sonderbuchstabe durch seine HTML-Entity-Sequenz wie folgt dargestellt wird:

var newText = magicFunction(text);
...
newText = "Übergroße Äpfel mit Würmern";

Die Funktion sollte nicht nur die Buchstaben dieses Beispiels entfallen sondern auch all diese.

Wie würden Sie das erreichen? Gibt es irgendeine bestehende Funktion da draußen? (Einfach, weil eine Lösung ohne Rahmen bevorzugt wird)

Übrigens: Ja, ich habe gesehen diese Frage aber das entspricht nicht meinem Bedürfnis.

Answer 1

Mit Hilfe von bucabay und dem Rat, meine eigene Funktion zu erstellen, habe ich diese Funktion erstellt, die für mich funktioniert. Was denkt ihr, gibt es irgendwo eine bessere Lösung?

if(typeof escapeHtmlEntities == 'undefined') {
        escapeHtmlEntities = function (text) {
            return text.replace(/[\u00A0-\u2666<>\&]/g, function(c) {
                return '&' + 
                (escapeHtmlEntities.entityTable[c.charCodeAt(0)] || '#'+c.charCodeAt(0)) + ';';
            });
        };

        // all HTML4 entities as defined here: http://www.w3.org/TR/html4/sgml/entities.html
        // added: amp, lt, gt, quot and apos
        escapeHtmlEntities.entityTable = {
            34 : 'quot', 
            38 : 'amp', 
            39 : 'apos', 
            60 : 'lt', 
            62 : 'gt', 
            160 : 'nbsp', 
            161 : 'iexcl', 
            162 : 'cent', 
            163 : 'pound', 
            164 : 'curren', 
            165 : 'yen', 
            166 : 'brvbar', 
            167 : 'sect', 
            168 : 'uml', 
            169 : 'copy', 
            170 : 'ordf', 
            171 : 'laquo', 
            172 : 'not', 
            173 : 'shy', 
            174 : 'reg', 
            175 : 'macr', 
            176 : 'deg', 
            177 : 'plusmn', 
            178 : 'sup2', 
            179 : 'sup3', 
            180 : 'acute', 
            181 : 'micro', 
            182 : 'para', 
            183 : 'middot', 
            184 : 'cedil', 
            185 : 'sup1', 
            186 : 'ordm', 
            187 : 'raquo', 
            188 : 'frac14', 
            189 : 'frac12', 
            190 : 'frac34', 
            191 : 'iquest', 
            192 : 'Agrave', 
            193 : 'Aacute', 
            194 : 'Acirc', 
            195 : 'Atilde', 
            196 : 'Auml', 
            197 : 'Aring', 
            198 : 'AElig', 
            199 : 'Ccedil', 
            200 : 'Egrave', 
            201 : 'Eacute', 
            202 : 'Ecirc', 
            203 : 'Euml', 
            204 : 'Igrave', 
            205 : 'Iacute', 
            206 : 'Icirc', 
            207 : 'Iuml', 
            208 : 'ETH', 
            209 : 'Ntilde', 
            210 : 'Ograve', 
            211 : 'Oacute', 
            212 : 'Ocirc', 
            213 : 'Otilde', 
            214 : 'Ouml', 
            215 : 'times', 
            216 : 'Oslash', 
            217 : 'Ugrave', 
            218 : 'Uacute', 
            219 : 'Ucirc', 
            220 : 'Uuml', 
            221 : 'Yacute', 
            222 : 'THORN', 
            223 : 'szlig', 
            224 : 'agrave', 
            225 : 'aacute', 
            226 : 'acirc', 
            227 : 'atilde', 
            228 : 'auml', 
            229 : 'aring', 
            230 : 'aelig', 
            231 : 'ccedil', 
            232 : 'egrave', 
            233 : 'eacute', 
            234 : 'ecirc', 
            235 : 'euml', 
            236 : 'igrave', 
            237 : 'iacute', 
            238 : 'icirc', 
            239 : 'iuml', 
            240 : 'eth', 
            241 : 'ntilde', 
            242 : 'ograve', 
            243 : 'oacute', 
            244 : 'ocirc', 
            245 : 'otilde', 
            246 : 'ouml', 
            247 : 'divide', 
            248 : 'oslash', 
            249 : 'ugrave', 
            250 : 'uacute', 
            251 : 'ucirc', 
            252 : 'uuml', 
            253 : 'yacute', 
            254 : 'thorn', 
            255 : 'yuml', 
            402 : 'fnof', 
            913 : 'Alpha', 
            914 : 'Beta', 
            915 : 'Gamma', 
            916 : 'Delta', 
            917 : 'Epsilon', 
            918 : 'Zeta', 
            919 : 'Eta', 
            920 : 'Theta', 
            921 : 'Iota', 
            922 : 'Kappa', 
            923 : 'Lambda', 
            924 : 'Mu', 
            925 : 'Nu', 
            926 : 'Xi', 
            927 : 'Omicron', 
            928 : 'Pi', 
            929 : 'Rho', 
            931 : 'Sigma', 
            932 : 'Tau', 
            933 : 'Upsilon', 
            934 : 'Phi', 
            935 : 'Chi', 
            936 : 'Psi', 
            937 : 'Omega', 
            945 : 'alpha', 
            946 : 'beta', 
            947 : 'gamma', 
            948 : 'delta', 
            949 : 'epsilon', 
            950 : 'zeta', 
            951 : 'eta', 
            952 : 'theta', 
            953 : 'iota', 
            954 : 'kappa', 
            955 : 'lambda', 
            956 : 'mu', 
            957 : 'nu', 
            958 : 'xi', 
            959 : 'omicron', 
            960 : 'pi', 
            961 : 'rho', 
            962 : 'sigmaf', 
            963 : 'sigma', 
            964 : 'tau', 
            965 : 'upsilon', 
            966 : 'phi', 
            967 : 'chi', 
            968 : 'psi', 
            969 : 'omega', 
            977 : 'thetasym', 
            978 : 'upsih', 
            982 : 'piv', 
            8226 : 'bull', 
            8230 : 'hellip', 
            8242 : 'prime', 
            8243 : 'Prime', 
            8254 : 'oline', 
            8260 : 'frasl', 
            8472 : 'weierp', 
            8465 : 'image', 
            8476 : 'real', 
            8482 : 'trade', 
            8501 : 'alefsym', 
            8592 : 'larr', 
            8593 : 'uarr', 
            8594 : 'rarr', 
            8595 : 'darr', 
            8596 : 'harr', 
            8629 : 'crarr', 
            8656 : 'lArr', 
            8657 : 'uArr', 
            8658 : 'rArr', 
            8659 : 'dArr', 
            8660 : 'hArr', 
            8704 : 'forall', 
            8706 : 'part', 
            8707 : 'exist', 
            8709 : 'empty', 
            8711 : 'nabla', 
            8712 : 'isin', 
            8713 : 'notin', 
            8715 : 'ni', 
            8719 : 'prod', 
            8721 : 'sum', 
            8722 : 'minus', 
            8727 : 'lowast', 
            8730 : 'radic', 
            8733 : 'prop', 
            8734 : 'infin', 
            8736 : 'ang', 
            8743 : 'and', 
            8744 : 'or', 
            8745 : 'cap', 
            8746 : 'cup', 
            8747 : 'int', 
            8756 : 'there4', 
            8764 : 'sim', 
            8773 : 'cong', 
            8776 : 'asymp', 
            8800 : 'ne', 
            8801 : 'equiv', 
            8804 : 'le', 
            8805 : 'ge', 
            8834 : 'sub', 
            8835 : 'sup', 
            8836 : 'nsub', 
            8838 : 'sube', 
            8839 : 'supe', 
            8853 : 'oplus', 
            8855 : 'otimes', 
            8869 : 'perp', 
            8901 : 'sdot', 
            8968 : 'lceil', 
            8969 : 'rceil', 
            8970 : 'lfloor', 
            8971 : 'rfloor', 
            9001 : 'lang', 
            9002 : 'rang', 
            9674 : 'loz', 
            9824 : 'spades', 
            9827 : 'clubs', 
            9829 : 'hearts', 
            9830 : 'diams', 
            338 : 'OElig', 
            339 : 'oelig', 
            352 : 'Scaron', 
            353 : 'scaron', 
            376 : 'Yuml', 
            710 : 'circ', 
            732 : 'tilde', 
            8194 : 'ensp', 
            8195 : 'emsp', 
            8201 : 'thinsp', 
            8204 : 'zwnj', 
            8205 : 'zwj', 
            8206 : 'lrm', 
            8207 : 'rlm', 
            8211 : 'ndash', 
            8212 : 'mdash', 
            8216 : 'lsquo', 
            8217 : 'rsquo', 
            8218 : 'sbquo', 
            8220 : 'ldquo', 
            8221 : 'rdquo', 
            8222 : 'bdquo', 
            8224 : 'dagger', 
            8225 : 'Dagger', 
            8240 : 'permil', 
            8249 : 'lsaquo', 
            8250 : 'rsaquo', 
            8364 : 'euro'
        };
    }

Anwendungsbeispiel:

var text = "Übergroße Äpfel mit Würmern";
alert(escapeHtmlEntities (text));

Ergebnis:

Übergroße Äpfel mit Würmern

• Update1: Danke bucabay noch einmal für den || - Hinweis

• Update2: Aktualisierte Entitätstabelle mit amp,lt,gt,apos,quot, danke richardtallent für den Hinweis

• Update3(im Jahr 2014): Mathias Bynens erstellt ein Libanon namens 'er' Vielleicht erfüllt es Ihren Bedarf.

Answer 2

Alle anderen hier vorgeschlagenen Lösungen sowie die meisten anderen JavaScript-Bibliotheken, die HTML-Entitäten kodieren/dekodieren, machen mehrere Fehler:

• Sie implementieren nicht die vollständige Liste der von den Browsern unterstützten benannten Zeichenreferenzen . Zum Beispiel, htmlDecode('≼') sollte zurückkehren '' ( es decir '\u227C' ).
• Sie unterstützen nicht die korrekte Kodierung von Astralsymbolen. Zum Beispiel, htmlEncode('') sollte etwas zurückgeben wie 𝌆 ou 𝌆 . Wenn eine Implementierung stattdessen zwei separate Entitäten zurückgibt (z. B. �� ou �� ), ist er kaputt.
• Sie unterstützen nicht die korrekte Dekodierung astraler Symbole. htmlDecode('𝌆') sollte zurückkehren '' y no '' ( es decir '\uD306' ).
• Sie implementieren nicht die Tabelle der Zeichenreferenzen, die im HTML-Standard aufgeführt sind . Zum Beispiel, htmlDecode('€') sollte zurückkehren '€' ( es decir '\u20AC' ).
• Sie sollten die Dekodierung in einem einzigen Durchgang durchführen. Zum Beispiel, htmlDecode('&') sollte zurückkehren '&' , nicht & .

Für eine robuste Lösung, die all diese Probleme vermeidet, verwenden Sie eine von mir geschriebene Bibliothek namens er für diese. Aus dessen README:

er (für "HTML-Entities") ist ein robuster, in JavaScript geschriebener HTML-Entity-Encoder/Decoder. Er unterstützt alle standardisierten benannten Zeichenreferenzen gemäß HTML , Griffe zweideutige Ampersands und andere Grenzfälle genau wie ein Browser verfügt über ein umfangreiches Testpaket und - im Gegensatz zu vielen anderen JavaScript-Lösungen - über er kommt mit astralen Unicode-Symbolen gut zurecht. Eine Online-Demo ist verfügbar.

Answer 3

Die Verwendung von escape() sollte mit dem Zeichencodebereich 0x00 bis 0xFF funktionieren ( UTF-8-Bereich ).

Wenn Sie über 0xFF (255) hinausgehen, z. B. 0x100 (256), funktioniert escape() nicht:

escape("\u0100"); // %u0100

und:

text = "\u0100"; // A
html = escape(text).replace(/%(..)/g,"&#x$1;"); // &#xu0;100

Wenn Sie also alle Unicode-Zeichen abdecken wollen, wie sie in http://www.w3.org/TR/html4/sgml/entities.html dann könnten Sie etwas verwenden wie:

var html = text.replace(/[\u00A0-\u00FF]/g, function(c) {
   return '&#'+c.charCodeAt(0)+';';
});

Der Bereich liegt hier zwischen: \u00A0 - \u00FF.

Das ist der erste Zeichencodebereich, der in http://www.w3.org/TR/html4/sgml/entities.html was dasselbe ist wie das, was escape() abdeckt.

Sie müssen die anderen Bereiche, die Sie abdecken möchten, ebenfalls hinzufügen, oder alle Bereiche.

Exemple : UTF-8-Bereich mit allgemeinen Interpunktionszeichen ( \u00A0 - \u00FF y \u2022 - \u2135 )

var html = text.replace(/[\u00A0-\u00FF\u2022-\u2135]/g, function(c) {
   return '&#'+c.charCodeAt(0)+';';
});

Edita:

ÜBRIGENS: \u00A0 - \u2666 sollte jeden Unicode-Zeichencode, der nicht im ASCII-Bereich liegt, blind in HTML-Entities umwandeln:

var html = text.replace(/[\u00A0-\u2666]/g, function(c) {
   return '&#'+c.charCodeAt(0)+';';
});

Answer 4

En er Bibliothek ist die einzige 100% zuverlässige Lösung, die ich kenne!

Er wird geschrieben von Mathias Bynens - einem der renommiertesten JavaScript-Gurus der Welt - und verfügt über die folgenden Funktionen :

• Unterstützung für alle standardisierten benannten Zeichenreferenzen
• Unterstützung für Unicode
• Funktioniert gut mit zweideutige Ampersands

---

Beispiel für die Verwendung

he.encode('foo © bar  baz  qux'); 
// Output : 'foo © bar ≠ baz 𝌆 qux'

he.decode('foo © bar ≠ baz 𝌆 qux');
// Output : 'foo © bar  baz  qux'

Answer 5

Sie können verwenden:

function encodeHTML(str){
 var aStr = str.split(''),
     i = aStr.length,
     aRet = [];

   while (i--) {
    var iC = aStr[i].charCodeAt();
    if (iC < 65 || iC > 127 || (iC>90 && iC<97)) {
      aRet.push('&#'+iC+';');
    } else {
      aRet.push(aStr[i]);
    }
  }
 return aRet.reverse().join('');
}

Diese Funktion HTMLEncodiert alles, was nicht a-z/A-Z ist.

[ bearbeiten ] Eine ziemlich alte Antwort. Fügen wir eine einfachere String-Erweiterung hinzu, um alle erweiterten Zeichen zu kodieren:

String.prototype.encodeHTML = function () {
  return this.replace(/[\u0080-\u024F]/g, 
          function (v) {return '&#'+v.charCodeAt()+';';}
         );
}
// usage
log('Übergroße Äpfel mit Würmern'.encodeHTML());
//=> 'Übergroße Äpfel mit Würmern'