HTML-entiteiten coderen in JavaScript

Ik werk in een CMS waarmee gebruikers inhoud kunnen invoeren. Het probleem is dat wanneer ze symbolen ® toevoegen, deze mogelijk niet goed worden weergegeven in alle browsers. Ik wil graag een lijst met symbolen maken waarnaar moet worden gezocht en die vervolgens moeten worden omgezet in de bijbehorende html-entiteit. Bijvoorbeeld

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

Na de conversie moet deze worden ingepakt in een <sup>-tag, wat resulteert in dit:

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

Omdat een bepaalde lettergrootte en opvulstijl nodig is:

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

Zou de JavaScript zoiets zijn?

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([?]);
}

Waar “[?]” betekent dat er iets is waar ik niet zeker van ben.

Aanvullende details:

• Ik zou dit willen doen met pure JavaScript, niet iets dat
  vereist een bibliotheek zoals jQuery, bedankt.
• Backend is Ruby
• RefineryCMS gebruiken dat is gebouwd met Ruby on Rails

Antwoord 1, autoriteit 100%

Je kunt regex gebruiken om elk teken in een bepaald unicode-bereik te vervangen door zijn html-entiteitsequivalent. De code ziet er ongeveer zo uit:

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

Deze code vervangt alle tekens in het opgegeven bereik (unicode 00A0 – 9999, evenals ampersand, groter en kleiner dan) door hun html-entiteitsequivalenten, wat eenvoudig &#nnn; waarbij nnn de unicode-waarde is die we krijgen van charCodeAt.

Bekijk het hier in actie: http://jsfiddle.net/E3EqX/13/ ( dit voorbeeld gebruikt jQuery voor elementselectors die in het voorbeeld worden gebruikt. De basiscode zelf, hierboven, gebruikt geen jQuery)

Het maken van deze conversies lost niet alle problemen op — zorg ervoor dat u UTF8-tekencodering gebruikt, zorg ervoor dat uw database de strings opslaat in UTF8. U kunt nog steeds gevallen zien waarin de tekens niet correct worden weergegeven, afhankelijk van de systeemlettertypeconfiguratie en andere problemen waar u geen controle over heeft.

Documentatie

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

Antwoord 2, autoriteit 32%

Het momenteel geaccepteerde antwoord heeft verschillende problemen. Dit bericht legt ze uit en biedt een robuustere oplossing. De oplossing die in dat antwoord eerder werd voorgesteld, had:

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

De vlag i is overbodig aangezien geen enkel Unicode-symbool in het bereik van U+00A0 tot U+9999 een hoofdletter-/kleine lettervariant heeft die buiten hetzelfde bereik valt.

De vlag m is overbodig omdat ^ of $ niet worden gebruikt in de reguliere expressie.

Waarom het bereik U+00A0 tot U+9999? Het lijkt willekeurig.

Hoe dan ook, voor een oplossing die alle correct codeert, behalve safe & afdrukbare ASCII-symbolen in de invoer (inclusief astrale symbolen!), en implementeert alle benoemde tekenreferenties (niet alleen die in HTML4), gebruik de hij bibliotheek (disclaimer: deze bibliotheek is van mij). Uit de README:

hij (voor HTML-entiteiten ) is een robuuste HTML-entiteit-encoder/-decoder geschreven in JavaScript. Het ondersteunt alle gestandaardiseerde benoemde karakterreferenties als per HTML, behandelt dubbelzinnige ampersands en andere randgevallen net zoals een browser dat zou doen, heeft een uitgebreide testsuite, en – in tegenstelling tot veel andere JavaScript-oplossingen – kan hij prima met astrale Unicode-symbolen omgaan. Er is een online demo beschikbaar.

Zie ook dit relevante Stack Overflow-antwoord.

Antwoord 3, autoriteit 14%

Ik had hetzelfde probleem en heb 2 functies gemaakt om entiteiten te maken en deze terug te vertalen naar normale tekens.
De volgende methoden vertalen elke string naar HTML-entiteiten en terug naar String-prototype

/**
 * 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]);
    })
};

U kunt het dan als volgt gebruiken:

var str = "Test?†®??©??o…?????™???o??? ?™en test".toHtmlEntities();
console.log("Entities:", str);
console.log("String:", String.fromHtmlEntities(str));

Uitvoer in console:

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

Antwoord 4, autoriteit 11%

Zonder enige bibliotheek, als u IE niet hoeft te ondersteunen < 9, kunt u een html-element maken en de inhoud ervan instellen met Node .textContent:

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

Hier is een voorbeeld: https://jsfiddle.net/1erdhehv/

Update: dit werkt alleen voor HTML-tag-entiteiten (&, < en >).

Antwoord 5, autoriteit 10%

U kunt dit gebruiken.

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

Antwoord 6, autoriteit 3%

Als u html-entiteiten niet meer dan één keer wilt coderen

function encodeHTML(str){
    return str.replace(/([\u00A0-\u9999<>&])(.|$)/g, function(full, char, next) {
      if(char !== '&' || next !== '#'){
        if(/[\u00A0-\u9999<>&]/.test(next))
          next = '&#' + next.charCodeAt(0) + ';';
        return '&#' + char.charCodeAt(0) + ';' + next;
      }
      return full;
    });
}
function decodeHTML(str){
    return str.replace(/&#([0-9]+);/g, function(full, int) {
        return String.fromCharCode(parseInt(int));
    });
}

# Voorbeeld

var text = "<a>Content &#169; <#>&<&#># </a>";
text = encodeHTML(text);
console.log("Encode 1 times: " + text);
// &#60;a&#62;Content &#169; &#60;#&#62;&#38;&#60;&#38;#&#62;# &#60;/a&#62;
text = encodeHTML(text);
console.log("Encode 2 times: " + text);
// &#60;a&#62;Content &#169; &#60;#&#62;&#38;&#60;&#38;#&#62;# &#60;/a&#62;
text = decodeHTML(text);
console.log("Decoded: " + text);
// <a>Content © <#>&<&#># </a>

Antwoord 7, autoriteit 2%

Als je jQuery al gebruikt, probeer dan html() .

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

Een tekstknooppunt in het geheugen wordt geïnstantieerd en html() wordt erop aangeroepen.

Het is lelijk, het verspilt een beetje geheugen, en ik heb geen idee of het zo grondig is als zoiets als de he bibliotheek, maar als je jQuery al gebruikt, is dit misschien een optie voor jou.

Genomen uit blogpost HTML coderen entiteiten met jQuery door Felix Geisendorfer.

Antwoord 8, autoriteit 2%

HTML speciale tekens & zijn ESCAPE CODES

Gereserveerde tekens moeten worden ontsnapt door HTML: we kunnen een teken-escape gebruiken om elk Unicode-teken weer te geven [Bijv.: & – U+00026] in HTML, XHTML of XML met alleen ASCII-tekens. Numerieke karakterreferenties [Bijvoorbeeld: ampersand(&) – &] & Verwijzingen naar benoemde tekens [Ex: &] zijn typen character escape used in markup.

Vooraf gedefinieerde entiteiten

    Oorspronkelijk teken     XML-entiteit vervangen     XML numerieke vervanging  
                          ;                                &lt;       &sp;                    nbsp;   ;        &#60;                   
                          ;                                  &gt;      nbsp;&sp;nbsp;                    nbsp;   ;       &#62;                      
                  "                          ;          &quot;       nbsp;     ;                         &#34;                  ;
                       ;                                &amp;        &sp;                    nbsp;   ;   &#38;                    
                                                        ;          &apos;           ;                          &#39;                           ; 

Om HTML-tags als een normale vorm op een webpagina weer te geven, gebruiken we <pre>, <code>-tags of we kunnen eraan ontsnappen. Ontsnappen aan de tekenreeks door elk voorkomen van het teken "&" te vervangen door de tekenreeks "&" en eventuele voorkomens van het ">"-teken door de tekenreeks ">". Bijvoorbeeld: stackoverflow post

function escapeCharEntities() {
    var map = {
        "&": "&",
        "<": "&lt;",
        ">": "&gt;",
        "\"": "&quot;",
        "'": "&apos;"
    };
    return map;
}
var mapkeys = '', mapvalues = '';
var html = {
    encodeRex : function () {
        return  new RegExp(mapkeys, 'g'); // "[&<>"']"
    }, 
    decodeRex : function () {
        return  new RegExp(mapvalues, 'g'); // "(&amp;|&lt;|&gt;|&quot;|&apos;)"
    },
    encodeMap : JSON.parse( JSON.stringify( escapeCharEntities () ) ), // json = {&: "&amp;", <: "&lt;", >: "&gt;", ": "&quot;", ': "&apos;"}
    decodeMap : JSON.parse( JSON.stringify( swapJsonKeyValues( escapeCharEntities () ) ) ),
    encode : function ( str ) {
        var encodeRexs = html.encodeRex();
        console.log('Encode Rex: ', encodeRexs); // /[&<>"']/gm
        return str.replace(encodeRexs, function(m) { console.log('Encode M: ', m); return html.encodeMap[m]; }); // m = < " > SpecialChars
    },
    decode : function ( str ) {
        var decodeRexs = html.decodeRex();
        console.log('Decode Rex: ', decodeRexs); // /(&amp;|&lt;|&gt;|&quot;|&apos;)/g
        return str.replace(decodeRexs, function(m) { console.log('Decode M: ', m); return html.decodeMap[m]; }); // m = &lt; &quot; &gt;
    }
};
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=""/>

Antwoord 9

var htmlEntities = [
            {regex:/&/g,entity:'&'},
            {regex:/>/g,entity:'>'},
            {regex:/</g,entity:'&lt;'},
            {regex:/"/g,entity:'&quot;'},
            {regex:/a/g,entity:'&aacute;'},
            {regex:/e/g,entity:'&eacute;'},
            {regex:/i/g,entity:'&iacute;'},
            {regex:/o/g,entity:'&oacute;'},
            {regex:/u/g,entity:'&uacute;'}
        ];
total = <some string value>
for(v in htmlEntities){
    total = total.replace(htmlEntities[v].regex, htmlEntities[v].entity);
}

Een array-oplossing

Antwoord 10

Soms wil je gewoon elk teken coderen… Deze functie vervangt “alles behalve niets” in regxp.

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

Antwoord 11

Hier is hoe ik de codering heb geïmplementeerd. Ik heb me laten inspireren door de bovenstaande antwoorden.

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("<>"));

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'

function decodeHTMLEntities(text) {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = text;
  return textArea.value;
}

function decodeHTMLEntities(text) {
  return $("<textarea/>").html(text).text();
}

function encodeHTMLEntities(text) {
  var textArea = document.createElement('textarea');
  textArea.innerText = text;
  return textArea.innerHTML;
}

function encodeHTMLEntities(text) {
  return $("<textarea/>").text(text).html();
}

const htmlEntities = [ 
    {regex:'&',entity:'&'},
    {regex:'>',entity:'>'},
    {regex:'<',entity:'&lt;'} 
  ];

 function htmlentities (s){
    var reg; 
    for (v in htmlEntities) {
      reg = new RegExp(htmlEntities[v].regex, 'g');
      s = s.replace(reg, htmlEntities[v].entity);
    }
    return s;
  }

 function  html_entities_decode (s){
    var reg; 
    for (v in htmlEntities) {
      reg = new RegExp(htmlEntities[v].entity, 'g');
      s = s.replace(reg, htmlEntities[v].regex);
    }
    return s;
   }

 var s  = '<div> God bless you guy   </div> '
 var h = encodeURIComponent(htmlentities(s));         /** To encode */
 h =  html_entities_decode(decodeURIComponent(h));     /** To decode */

const all_entities = [{ /* source: https://www.w3schools.com/html/html_entities.asp */
    encoded: ` `,
    decoded: ` `
}, {
    encoded: `<`,
    decoded: `<`
}, {
    encoded: `&gt;`,
    decoded: `>`
}, {
    encoded: `&amp;`,
    decoded: `&`
}, {
    encoded: `&quot;`,
    decoded: `"`
}, {
    encoded: `&apos;`,
    decoded: `'`
}, {
    encoded: `&cent;`,
    decoded: `?`
}, {
    encoded: `&pound;`,
    decoded: `?`
}, {
    encoded: `&yen;`,
    decoded: `yen`
}, {
    encoded: `&euro;`,
    decoded: `€`
}, {
    encoded: `&copy;`,
    decoded: `©`
}, {
    encoded: `&reg;`,
    decoded: `®`
}]
for (i = 0; i < all_entities.length; i++) {
    var decoded_text = decoded_text.replace(new RegExp(all_entities[i].encoded, 'g'), all_entities[i].decoded)
}
return decoded_text;

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

<!DOCTYPE html>
<html>
<style>
button {
backround: #ccc;
padding: 14px;
width: 400px;
font-size: 32px;
}
#demo {
font-size: 20px;
font-family: Arial;
font-weight: bold;
}
</style>
<body>
<p>Click the button to decode.</p>
<button onclick="entitycode()">Html Code</button>
<p id="demo"></p>
<script>
function entitycode() {
  var uri = "quotation  = ark __ &apos; = apostrophe  __ &amp; = ampersand __ &lt; = less-than __ &gt; = greater-than __ 	non- = reaking space __ &iexcl; = inverted exclamation mark __ &cent; = cent __ &pound; = pound __ &curren; = currency __ &yen; = yen __ &brvbar; = broken vertical bar __ &sect; = section __ &uml; = spacing diaeresis __ &copy; = copyright __ &ordf; = feminine ordinal indicator __ &laquo; = angle quotation mark (left) __ &not; = negation __ &shy; = soft hyphen __ &reg; = registered trademark __ &macr; = spacing macron __ &deg; = degree __ &plusmn; = plus-or-minus  __ &sup2; = superscript 2 __ &sup3; = superscript 3 __ &acute; = spacing acute __ &micro; = micro __ &para; = paragraph __ &middot; = middle dot __ &cedil; = spacing cedilla __ &sup1; = superscript 1 __ &ordm; = masculine ordinal indicator __ &raquo; = angle quotation mark (right) __ &frac14; = fraction 1/4 __ &frac12; = fraction 1/2 __ &frac34; = fraction 3/4 __ &iquest; = inverted question mark __ &times; = multiplication __ &divide; = division __ &Agrave; = capital a, grave accent __ &Aacute; = capital a, acute accent __ &Acirc; = capital a, circumflex accent __ &Atilde; = capital a, tilde __ &Auml; = capital a, umlaut mark __ &Aring; = capital a, ring __ &AElig; = capital ae __ &Ccedil; = capital c, cedilla __ &Egrave; = capital e, grave accent __ &Eacute; = capital e, acute accent __ &Ecirc; = capital e, circumflex accent __ &Euml; = capital e, umlaut mark __ &Igrave; = capital i, grave accent __ &Iacute; = capital i, acute accent __ &Icirc; = capital i, circumflex accent __ &Iuml; = capital i, umlaut mark __ &ETH; = capital eth, Icelandic __ &Ntilde; = capital n, tilde __ &Ograve; = capital o, grave accent __ &Oacute; = capital o, acute accent __ &Ocirc; = capital o, circumflex accent __ &Otilde; = capital o, tilde __ &Ouml; = capital o, umlaut mark __ &Oslash; = capital o, slash __ &Ugrave; = capital u, grave accent __ &Uacute; = capital u, acute accent __ &Ucirc; = capital u, circumflex accent __ &Uuml; = capital u, umlaut mark __ &Yacute; = capital y, acute accent __ &THORN; = capital THORN, Icelandic __ &szlig; = small sharp s, German __ &agrave; = small a, grave accent __ &aacute; = small a, acute accent __ &acirc; = small a, circumflex accent __ &atilde; = small a, tilde __ &auml; = small a, umlaut mark __ &aring; = small a, ring __ &aelig; = small ae __ &ccedil; = small c, cedilla __ &egrave; = small e, grave accent __ &eacute; = small e, acute accent __ &ecirc; = small e, circumflex accent __ &euml; = small e, umlaut mark __ &igrave; = small i, grave accent __ &iacute; = small i, acute accent __ &icirc; = small i, circumflex accent __ &iuml; = small i, umlaut mark __ &eth; = small eth, Icelandic __ &ntilde; = small n, tilde __ &ograve; = small o, grave accent __ &oacute; = small o, acute accent __ &ocirc; = small o, circumflex accent __ &otilde; = small o, tilde __ &ouml; = small o, umlaut mark __ &oslash; = small o, slash __ &ugrave; = small u, grave accent __ &uacute; = small u, acute accent __ &ucirc; = small u, circumflex accent __ &uuml; = small u, umlaut mark __ &yacute; = small y, acute accent __ &thorn; = small thorn, Icelandic __ &yuml; = small y, umlaut mark";
  var enc = encodeURI(uri);
  var dec = decodeURI(enc);
  var res = dec;
  document.getElementById("demo").innerHTML = res;
}
</script>
</body>
</html>