Ich arbeite in einem CMS, mit dem Benutzer Inhalte eingeben können. Das Problem ist, dass beim Hinzufügen von Symbolen ®möglicherweise nicht alle Browser gut angezeigt werden. Ich möchte eine Liste von Symbolen erstellen, nach denen gesucht und dann in die entsprechende HTML-Entität konvertiert werden muss. Beispielsweise

® => ®
& => &
© => ©
™ =>™

Nach der Konvertierung muss es in ein <sup>Tag eingeschlossen werden, was Folgendes zur Folge hat:

® => <sup>&reg;</sup>

Weil eine bestimmte Schriftgröße und ein bestimmter Füllstil erforderlich sind:

sup { font-size: 0.6em; padding-top: 0.2em; }

Wäre das JavaScript so etwas?

var regs = document.querySelectorAll('®');
  for ( var i = 0, l = imgs.length; i < l; ++i ) {
  var [?] = regs[i];
  var [?] = document.createElement('sup');
  img.parentNode.insertBefore([?]);
  div.appendChild([?]);
}

Wo "[?]" Bedeutet, dass es etwas gibt, bei dem ich mir nicht sicher bin.

Weitere Details:

• Ich möchte dies mit reinem JavaScript tun, nicht mit einer Bibliothek wie jQuery, danke.
• Backend ist Ruby
• Verwenden von RefineryCMS, das mit Ruby on Rails erstellt wurde

Sie können Regex verwenden, um jedes Zeichen in einem bestimmten Unicode-Bereich durch das entsprechende HTML-Entitätszeichen zu ersetzen. Der Code würde ungefähr so ​​aussehen:

var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
   return '&#'+i.charCodeAt(0)+';';
});

Mit ihrem HTML - Entity - Äquivalente, die einfach ist - Dieser Code wird alle Zeichen im angegebenen Bereich (9999, sowie etzeichen, größer und kleiner als Unicode 00A0) ersetzen , &#nnn;wo nnnwerden den Unicode - Wert , den wir aus bekommen charCodeAt.

Sehen Sie es hier in Aktion: http://jsfiddle.net/E3EqX/13/ (In diesem Beispiel wird jQuery für die im Beispiel verwendeten Elementselektoren verwendet. Der Basiscode selbst verwendet oben nicht jQuery.)

Durch diese Konvertierungen werden nicht alle Probleme gelöst. Stellen Sie sicher, dass Sie die UTF8-Zeichencodierung verwenden. Stellen Sie sicher, dass Ihre Datenbank die Zeichenfolgen in UTF8 speichert. Sie immer noch können Fälle sehen , wo die Zeichen nicht korrekt angezeigt werden , abhängig von der Systemkonfiguration Schriftart und anderen Fragen aus Ihrer Kontrolle.

Dokumentation

• String.charCodeAt- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt
• HTML-Zeichenentitäten - http://www.chucke.com/entities.html

Die derzeit akzeptierte Antwort weist mehrere Probleme auf. Dieser Beitrag erklärt sie und bietet eine robustere Lösung. Die in dieser Antwort vorgeschlagene Lösung lautet:

var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
  return '&#' + i.charCodeAt(0) + ';';
});

Das iFlag ist redundant, da kein Unicode-Symbol im Bereich von U + 00A0 bis U + 9999 eine Variante in Groß- / Kleinbuchstaben aufweist, die außerhalb desselben Bereichs liegt.

Die mFlagge ist redundant , weil ^oder $nicht in dem regulären Ausdruck verwendet werden.

Warum der Bereich U + 00A0 bis U + 9999? Es scheint willkürlich.

Verwenden Sie für eine Lösung, die alle außer sicheren und druckbaren ASCII-Symbolen in der Eingabe (einschließlich Astralsymbolen!) Korrekt codiert und alle benannten Zeichenreferenzen (nicht nur die in HTML4) implementiert, die Bibliothek he (Haftungsausschluss: Diese Bibliothek gehört mir) ). Aus seiner README:

er (für „HTML-Entitäten“) ist ein robuster HTML-Entitätscodierer / -decodierer, der in JavaScript geschrieben ist. Es unterstützt alle standardisierten Namen Zeichenreferenzen per HTML , Griffe mehrdeutig Et - Zeichen und andere Grenzfälle wie ein Browser würde , eine umfangreiche Testreihe hat, und - im Gegensatz zu vielen anderen JavaScript - Lösungen - er gerade fein Astral Unicode - Zeichen behandelt. Eine Online-Demo ist verfügbar.

Siehe auch diese relevante Antwort zum Stapelüberlauf .

Ich hatte das gleiche Problem und erstellte zwei Funktionen, um Entitäten zu erstellen und sie wieder in normale Zeichen zu übersetzen. Die folgenden Methoden übersetzen beliebige Zeichenfolgen in HTML-Entitäten und zurück in den Zeichenfolgenprototyp

/**
 * Convert a 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) + ";";
    });
};

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

Sie können es dann wie folgt verwenden:

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

Ausgabe in der Konsole:

Entities: Dit is e´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en t£eést
String: Dit is e´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en t£eést 

Wenn Sie ohne Bibliothek IE <9 nicht benötigen, können Sie ein HTML-Element erstellen und dessen Inhalt mit Node.textContent festlegen :

var str = "<this is not a tag>";
var p = document.createElement("p");
p.textContent = str;
var converted = p.innerHTML;

Hier ist ein Beispiel: https://jsfiddle.net/1erdhehv/

Sie können dies verwenden.

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

var regexString = '[';
for(var key in escapeChars) {
  regexString += key;
}
regexString += ']';

var regex = new RegExp( regexString, 'g');

function escapeHTML(str) {
  return str.replace(regex, function(m) {
    return '&' + escapeChars[m] + ';';
  });
};

https://github.com/epeli/underscore.string/blob/master/escapeHTML.js

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;
        }
    });
};

Wenn Sie vermeiden möchten, HTML-Entitäten mehrmals zu codieren

function encodeHTML(str){
    return str.replace(/[\u00A0-\u9999<>&](?!#)/gim, function(i) {
      return '&#' + i.charCodeAt(0) + ';';
    });
}

function decodeHTML(str){
    return str.replace(/&#([0-9]{1,3});/gi, function(match, num) {
        return String.fromCharCode(parseInt(num));
    });
}

Beispiel

var text = "<a>Content</a>";

text = encodeHTML(text);
console.log("Encode 1 times: " + text);

// &#60;a&#62;Content&#60;/a&#62;

text = encodeHTML(text);
console.log("Encode 2 times: " + text);

// &#60;a&#62;Content&#60;/a&#62;

text = decodeHTML(text);
console.log("Decoded: " + text);

// <a>Content</a>

HTML Sonderzeichen & seine ESCAPE CODES

Reservierte Zeichen müssen durch HTML maskiert werden: Wir können ein Zeichen-Escape verwenden, um jedes Unicode-Zeichen [Beispiel: & - U + 00026] in HTML, XHTML oder XML nur mit ASCII-Zeichen darzustellen. Numerische Zeichenreferenzen [Beispiel : kaufmännisches Und (&) - &] und benannte Zeichenreferenzen [Beispiel: &] sind Typen von character escape used in markup.

Vordefinierte Entitäten

    Original Character     XML entity replacement    XML numeric replacement  
                  <                                    &lt;                                           &#60;                    
                  >                                     &gt;                                         &#62;                    
                  "                                     &quot;                                      &#34;                    
                  &                                   &amp;                                       &#38;                    
                   '                                    &apos;                                      &#39;                    

Um HTML-Tags als normales Formular in einer von uns verwendeten Webseite anzuzeigen <pre>, können <code>Tags oder Tags ausgeblendet werden. Escape-Zeichenfolge durch Ersetzen durch ein beliebiges Vorkommen des "&"Zeichens durch die Zeichenfolge "&"und durch ein beliebiges Vorkommen des ">"Zeichens durch die Zeichenfolge ">". Ex:stackoverflow post

function escapeCharEntities() {
    var map = {
        "&": "&",
        "<": "&lt;",
        ">": "&gt;",
        "\"": "&quot;",
        "'": "&apos;"
    };
    return map;
}

var mapkeys = '', mapvalues = '';
var html = {
    encodeRex : function () {
        return  new RegExp(mapkeys, 'gm');
    }, 
    decodeRex : function () {
        return  new RegExp(mapvalues, 'gm');
    },
    encodeMap : JSON.parse( JSON.stringify( escapeCharEntities () ) ),
    decodeMap : JSON.parse( JSON.stringify( swapJsonKeyValues( escapeCharEntities () ) ) ),
    encode : function ( str ) {
        return str.replace(html.encodeRex(), function(m) { return html.encodeMap[m]; });
    },
    decode : function ( str ) {
        return str.replace(html.decodeRex(), function(m) { return html.decodeMap[m]; });
    }
};

function swapJsonKeyValues ( json ) {
    var count = Object.keys( json ).length;
    var obj = {};
    var keys = '[', val = '(', keysCount = 1;
    for(var key in json) {
        if ( json.hasOwnProperty( key ) ) {
            obj[ json[ key ] ] = key;
            keys += key;
            if( keysCount < count ) {
                val += json[ key ]+'|';
            } else {
                val += json[ key ];
            }
            keysCount++;
        }
    }
    keys += ']';    val  += ')';
    console.log( keys, ' == ', val);
    mapkeys = keys;
    mapvalues = val;
    return obj;
}

console.log('Encode: ', html.encode('<input type="password" name="password" value=""/>') ); 
console.log('Decode: ', html.decode(html.encode('<input type="password" name="password" value=""/>')) );

O/P:
Encode:  &lt;input type=&quot;password&quot; name=&quot;password&quot; value=&quot;&quot;/&gt;
Decode:  <input type="password" name="password" value=""/>

var htmlEntities = [
            {regex:/&/g,entity:'&'},
            {regex:/>/g,entity:'>'},
            {regex:/</g,entity:'&lt;'},
            {regex:/"/g,entity:'&quot;'},
            {regex:/á/g,entity:'&aacute;'},
            {regex:/é/g,entity:'&eacute;'},
            {regex:/í/g,entity:'&iacute;'},
            {regex:/ó/g,entity:'&oacute;'},
            {regex:/ú/g,entity:'&uacute;'}
        ];

total = <some string value>

for(v in htmlEntities){
    total = total.replace(htmlEntities[v].regex, htmlEntities[v].entity);
}

Eine Array-Lösung

Wenn Sie jQuery bereits verwenden, versuchen Sie es html().

$('<div>').text('<script>alert("gotcha!")</script>').html()
// "&lt;script&gt;alert("gotcha!")&lt;/script&gt;"

Ein speicherinterner Textknoten wird instanziiert und darauf html()aufgerufen.

Es ist hässlich, es verschwendet ein bisschen Speicher und ich habe keine Ahnung, ob es so gründlich ist wie die heBibliothek, aber wenn Sie jQuery bereits verwenden, ist dies möglicherweise eine Option für Sie.

Entnommen aus dem Blog-Beitrag Codieren Sie HTML-Entitäten mit jQuery von Felix Geisendörfer.

Manchmal möchten Sie einfach jedes Zeichen codieren ... Diese Funktion ersetzt "alles außer nichts" in regxp.

function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}

function encode(w) {
  return w.replace(/[^]/g, function(w) {
    return "&#" + w.charCodeAt(0) + ";";
  });
}

test.value=encode(document.body.innerHTML.trim());

<textarea id=test rows=11 cols=55>www.WHAK.com</textarea>

replaceHtmlEntities(text) {
  var tagsToReplace = {
    '&': '&',
    '&lt;': '<',
    '&gt;': '>',
  };
  var newtext = text;
  for (var tag in tagsToReplace) {
    if (Reflect.apply({}.hasOwnProperty, this, [tagsToReplace, tag])) {
      var regex = new RegExp(tag, 'g');
      newtext = newtext.replace(regex, tagsToReplace[tag]);
    }
  }
  return newtext;
}

Testen Sie das Tutorial von Ourcodeworld Ourcodeworld - Kodieren und Dekodieren von HTML-Entitäten mit Javascript

Am wichtigsten ist das Beispiel der He.js-Bibliothek

he.encode('foo © bar ≠ baz ???? qux');
// → 'foo © bar ≠ baz 𝌆 qux'

// Passing an `options` object to `encode`, to explicitly encode all symbols:
he.encode('foo © bar ≠ baz ???? qux', {
 'encodeEverything': true
});

he.decode('foo © bar ≠ baz 𝌆 qux');
// → 'foo © bar ≠ baz ???? qux'

Hier ist, wie ich die Codierung implementiert habe. Ich habe mich von den oben gegebenen Antworten inspirieren lassen.

function encodeHTML(str) {
  const code = {
      ' ' : ' ',
      '¢' : '¢',
      '£' : '£',
      '¥' : '¥',
      '€' : '€', 
      '©' : '©',
      '®' : '®',
      '<' : '&lt;', 
      '>' : '&gt;',  
      '"' : '&quot;', 
      '&' : '&amp;',
      '\'' : '&apos;'
  };
  return str.replace(/[\u00A0-\u9999<>\&''""]/gm, (i)=>code[i]);
}

// TEST
console.log(encodeHTML("Dolce & Gabbana"));
console.log(encodeHTML("Hamburgers < Pizza < Tacos"));
console.log(encodeHTML("Sixty > twelve"));
console.log(encodeHTML('Stuff in "quotation marks"'));
console.log(encodeHTML("Schindler's List"));
console.log(encodeHTML("<>"));

Mit der charCodeAt()Methode können Sie überprüfen, ob das angegebene Zeichen einen Wert über 127 hat, und es mit in eine numerische Zeichenreferenz konvertieren toString(16).