Einfache Lösung zum Codieren von HTML-Entitäten in JavaScript

1. Verwenden Sie String.prototype.toHtmlEntities(), um Strings in HTML-Entities zu kodieren
2. Verwenden Sie String.fromHtmlEntities(), um Strings aus HTML-Entitäten zu kodieren
3. Verwenden Sie die Funktion unescapeHTML(), um HTML-Entitäten in JavaScript zu kodieren

In diesem Artikel werden die besten Lösungen zum Codieren von HTML-Entitäten in JavaScript erläutert. Der folgende Beispielcode übersetzt jeden String in HTML-Entitäten und zurück in einen String-Prototyp.

Verwenden Sie String.prototype.toHtmlEntities(), um Strings in HTML-Entities zu kodieren

Im folgenden JavaScript-Code,

• String.prototype.toHtmlEntities = function() gibt mit Hilfe der Methode .replace() einen String zurück, der HTML-Entities enthält.
• .replace() findet den Wert des angegebenen Strings und ändert ihn mit dem neuen gewünschten/angegebenen Wert.
• .prototype ist ein Objekt in JavaScript. Es ist standardmäßig mit Funktionen und Objekten verknüpft.
• String.charCodeAt() gibt den Unicode des Zeichens zurück, das den Index in einem String beschrieben hat.

/**
 * Conversion of string to HTML entities
 */
String.prototype.toHtmlEntities = function() {
  return this.replace(/./gm, function(s) {
    // return "&#" + s.charCodeAt(0) + ";";
    return (s.match(/[a-z0-9\s]+/i)) ? s : '&#' + s.charCodeAt(0) + ';';
  });
};

Verwenden Sie String.fromHtmlEntities(), um Strings aus HTML-Entitäten zu kodieren

In den folgenden JavaScript-Anweisungen haben wir erstellt:

• String.fromHtmlEntities = function(string), der jeden string empfängt, der HTML-Entities enthält.
• Hier im Beispiel ist der angegebene String-Wert in .replace() /&#\d+;/gm, der durch eine function(s) ersetzt wird, die einen String String.fromCharCode zurückgibt.
• String.fromCharCode ist eine Methode, die einen von einer Sequenz generierten String zurückgibt.

/**
 * Creation of string from HTML entities
 */
String.fromHtmlEntities = function(string) {
  return (string + '').replace(/&#\d+;/gm, function(s) {
    return String.fromCharCode(s.match(/\d+/gm)[0]);
  })
};

Verwenden Sie danach die Funktion wie unten beschrieben.

• Hier ist eine Variable var str, die mit einem String mit Sonderzeichen (†®¥¨©˙∫ø…ˆƒ∆…) initialisiert wird.
• Eine Funktion .toHtmlEntities wird mit dieser Sonderzeichenkette var str aufgerufen.
• console.log ist eine Standardfunktion von JavaScript, die Werte in der Log-Box anzeigt.

var str = "Dummy Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést".toHtmlEntities();
console.log("Entities:", str);
console.log("String:", String.fromHtmlEntities(str));

Die Ausgabe der Konsole ist wie folgt.

"Entities:"
"Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést"
"String:"
"Dummy Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést"

Verwenden Sie die Funktion unescapeHTML(), um HTML-Entitäten in JavaScript zu kodieren

Sie können diese Funktionen auf JavaScript-Compilern online oder offline überprüfen. Es hilft Ihnen, den string anzuzeigen, ohne dass der Browser ihr HTML liest. Dies kann auf andere Weise geschehen. Sie können ein Objekt aus HTML-Entitäten erstellen.

• Eine Variable var htmlEntities enthält ein Objekt von Sonderzeichen und Symbolen.
• Eine Funktion unescapeHTML(str) empfängt String- und Rückgabewerte mit Hilfe von .replace()-Bedingungen.

var htmlEntities = {
  nbsp: ' ',
  cent: '¢',
  pound: '£',
  yen: '¥',
  euro: '€',
  copy: '©',
  reg: '®',
  lt: '<',
  gt: '>',
  quot: '"',
  amp: '&',
  apos: '\''
};

function unescapeHTML(str) {
  return str.replace(/\&([^;]+);/g, function(entity, entityCode) {
    var match;

    if (entityCode in htmlEntities) {
      return htmlEntities[entityCode];
      /*eslint no-cond-assign: 0*/
    } else if (match = entityCode.match(/^#x([\da-fA-F]+)$/)) {
      return String.fromCharCode(parseInt(match[1], 16));
      /*eslint no-cond-assign: 0*/
    } else if (match = entityCode.match(/^#(\d+)$/)) {
      return String.fromCharCode(~~match[1]);
    } else {
      return entity;
    }
  });
};

Es gibt keine native Version von HTML-Entitäten in JavaScript. Wenn Sie nur Grundlagen benötigen, damit der Browser nicht als HTML interpretiert. Das PHP.js-Projekt, das eine Aufgabe zum Portieren der lokalen Kapazitäten jedes PHP auf JavaScript darstellt, enthält ebenfalls ein Modell. In diesem Sinne habe ich es einfach gehalten und das Folgende verwendet:

function EntitiesHtml(string) {
  return String(string)
      .replace(/&/g, '&')
      .replace(/>/g, '>')
      .replace(/</g, '&lt;')
      .replace(/"/g, '&quot;');
}