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

Eine Nachschlagetabelle mit einer Unzahl von replace()-Aufrufen ist langsam und nicht wartbar.

Glücklicherweise ist die eingebaute escape() Funktion auch kodiert die meisten der gleichen Zeichen und bringt sie in ein einheitliches Format (%XX, wobei XX der Hex-Wert des Zeichens ist).

Sie können also die Methode escape() die meiste Arbeit für Sie erledigen lassen und einfach die Antwort so ändern, dass sie HTML-Entities anstelle von URL-escapten Zeichen enthält:

htmlescaped = escape(mystring).replace(/%(..)/g,"&#x$1;");

Dabei wird das Hex-Format für das Escaping von Werten verwendet und nicht die benannten Entitäten, aber zum Speichern und Anzeigen der Werte funktioniert es genauso gut wie benannte Entitäten.

Natürlich können mit escape auch Zeichen entkommen, die Sie nicht müssen Escape in HTML (z.B. Leerzeichen), aber Sie können sie mit ein paar replace-Aufrufen unescape.

Edita: Mir gefällt die Antwort von bucabay besser als meine eigene... sie verarbeitet eine größere Anzahl von Zeichen und erfordert kein nachträgliches Hacken, um Leerzeichen, Schrägstriche usw. unescaped zu bekommen.

Answer 2

Ich habe mein Problem durch die Verwendung von encodeURIComponent() anstelle von escape() .

Dies könnte die Lösung für Sie sein, wenn das Problem beim Senden Ihrer Zeichenfolge in einer URL auftritt.

Versuchen Sie dies mit der Phrase ("Hallo & % '")

escape() gibt zurück.

"hi%20%26%20%25%20%u2018"

Beachten Sie die %u2018 ist nicht sehr url-freundlich und kann den Rest des Query-Strings zerstören.

encodeURI() gibt zurück.

"hi%20&%20%25%20%E2%80%98"

Beachten Sie, dass das kaufmännische Und immer noch vorhanden ist.

encodeURIComponent() gibt zurück.

"hi%20%26%20%25%20%E2%80%98"

Endlich sind alle unsere Zeichen richtig kodiert.

Answer 3

Demo auf JSFiddle

Hier ist eine kleine eigenständige Methode, die:

• versucht, die Antworten auf dieser Seite zu konsolidieren, ohne eine Bibliothek zu benutzen
• funktioniert in älteren Browsern
• unterstützt Surrogatpaare (wie Emojis)
• wendet Zeichenüberschreibungen an (was ist das? bin mir nicht ganz sicher)

Ich weiß nicht allzu viel über Unicode, aber es scheint gut zu funktionieren.

// escape a string for display in html
// see also: 
// polyfill for String.prototype.codePointAt
//   https://raw.githubusercontent.com/mathiasbynens/String.prototype.codePointAt/master/codepointat.js
// how to convert characters to html entities
//     http://stackoverflow.com/a/1354491/347508
// html overrides from 
//   https://html.spec.whatwg.org/multipage/syntax.html#table-charref-overrides / http://stackoverflow.com/questions/1354064/how-to-convert-characters-to-html-entities-using-plain-javascript/23831239#comment36668052_1354098

var _escape_overrides = { 0x00:'\uFFFD',0x80:'\u20AC',0x82:'\u201A',0x83:'\u0192',0x84:'\u201E',0x85:'\u2026',0x86:'\u2020',0x87:'\u2021',0x88:'\u02C6',0x89:'\u2030',0x8A:'\u0160',0x8B:'\u2039',0x8C:'\u0152',0x8E:'\u017D',0x91:'\u2018',0x92:'\u2019',0x93:'\u201C',0x94:'\u201D',0x95:'\u2022',0x96:'\u2013',0x97:'\u2014',0x98:'\u02DC',0x99:'\u2122',0x9A:'\u0161',0x9B:'\u203A',0x9C:'\u0153',0x9E:'\u017E',0x9F:'\u0178' }; 

function escapeHtml(str){
    return str.replace(/([\u0000-\uD799]|[\uD800-\uDBFF][\uDC00-\uFFFF])/g, function(c) {
        var c1 = c.charCodeAt(0);
        // ascii character, use override or escape
        if( c1 <= 0xFF ) return (c1=_escape_overrides[c1])?c1:escape(c).replace(/%(..)/g,"&#x$1;");
        // utf8/16 character
        else if( c.length == 1 ) return "&#" + c1 + ";"; 
        // surrogate pair
        else if( c.length == 2 && c1 >= 0xD800 && c1 <= 0xDBFF ) return "&#" + ((c1-0xD800)*0x400 + c.charCodeAt(1) - 0xDC00 + 0x10000) + ";"
        // no clue .. 
        else return "";
    });
}

Answer 4

Ich veröffentliche nur @bucababy's 回答 als "Bookmarklet" zu verwenden, da dies manchmal einfacher ist als die Verwendung von die Nachschlagen Seiten:

alert(prompt('Enter characters to htmlEncode', '').replace(/[\u00A0-\u2666]/g, function(c) {
   return '&#'+c.charCodeAt(0)+';';
}));

Answer 5

Ich empfehle die Verwendung der JS-Bibliothek Einrichtungen . Die Verwendung der Bibliothek ist recht einfach. Siehe die Beispiele in der Dokumentation:

const entities = require("entities");
//encoding
entities.escape("&"); // "&"
entities.encodeXML("&"); // "&"
entities.encodeHTML("&"); // "&"
//decoding
entities.decodeXML("asdf & ÿ ü '"); // "asdf & ÿ ü '"
entities.decodeHTML("asdf & ÿ ü '"); // "asdf & ÿ ü '"