Javascript'te html varlıklarını kodlayın

Kullanıcıların içerik girmesine izin veren bir CMS'de çalışıyorum. Sorun, semboller eklediklerinde ®tüm tarayıcılarda iyi görüntülenmeyebilmesidir. Aranması ve ardından karşılık gelen html varlığına dönüştürülmesi gereken sembollerin bir listesini oluşturmak istiyorum. Örneğin

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

Dönüşümden sonra, bir <sup>etikete sarılması gerekir, bu da şuna neden olur:

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

Belirli bir yazı tipi boyutu ve dolgu stili gerekli olduğundan:

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

JavaScript böyle bir şey olur mu?

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

"[?]" Emin olmadığım bir şey olduğu anlamına gelir.

Ek detaylar:

• Bunu saf JavaScript ile yapmak istiyorum, jQuery gibi bir kitaplık gerektiren bir şey değil, teşekkürler.
• Arka uç Ruby'dir
• Ruby on Rails ile oluşturulan RefineryCMS'yi kullanma

Belirli bir unicode aralığındaki herhangi bir karakteri html varlığı eşdeğeriyle değiştirmek için normal ifadeyi kullanabilirsiniz. Kod şuna benzer:

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

Bu kod, verilen aralıktaki tüm karakterleri (unicode 00A0 - 9999 ve ayrıca ve işareti, daha büyük ve daha küçük) html varlık eşdeğerleri ile değiştirir, bu da elde ettiğimiz unicode değerinin basitçe &#nnn;olduğu yerdir .nnncharCodeAt

Burada nasıl çalıştığını görün: http://jsfiddle.net/E3EqX/13/ (bu örnek, örnekte kullanılan öğe seçiciler için jQuery kullanır. Yukarıdaki temel kodun kendisi jQuery kullanmaz)

Bu dönüştürmeleri yapmak tüm sorunları çözmez - UTF8 karakter kodlamasını kullandığınızdan emin olun, veritabanınızın dizeleri UTF8'de depoladığından emin olun. Sen hala karakterler kontrolden çıkarak sistem yazı yapılandırmasına ve diğer konularda bağlı düzgün görüntülenmez örneklerini görebilirsiniz.

Dokümantasyon

• String.charCodeAt- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt
• HTML Karakter varlıkları - http://www.chucke.com/entities.html

Şu anda kabul edilen yanıtın birkaç sorunu var. Bu gönderi onları açıklıyor ve daha sağlam bir çözüm sunuyor. Bu cevapta önerilen çözüm daha önce şöyleydi:

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

iBayrak U +, 00A0 gelen U + 9999 aralığında bir Unicode simge beri gereksiz bir büyük / küçük varyant dışında aynı aralığın olduğu.

mÇünkü bayrak gereksiz ^veya $normal ifadede kullanılmaz.

Neden U + 00A0 ile U + 9999 aralığı? Keyfi görünüyor.

Her neyse, girdideki (astral semboller dahil!) Güvenli ve yazdırılabilir ASCII sembolleri hariç tümünü doğru bir şekilde kodlayan ve tüm adlandırılmış karakter referanslarını (yalnızca HTML4'tekileri değil) uygulayan bir çözüm için, kitaplığı kullanın (sorumluluk reddi: Bu kitaplık benimdir ). BENİOKU'dan:

o ("HTML varlıkları" için) JavaScript'te yazılmış sağlam bir HTML varlık kodlayıcı / kod çözücüdür. Bu destekler HTML uyarınca tüm standardize adlı karakter referansları , kolları belirsiz ve işaretleri ve diğer kenar durumlarda sadece bir tarayıcı yaptığınız gibi , geniş bir test takımı ve var - - Birçok diğer JavaScript çözümleri aykırı diye gayet astral Unicode sembolleri işler. Çevrimiçi bir demo mevcuttur.

Ayrıca bu ilgili Yığın Taşması yanıtına bakın .

Aynı sorunu yaşadım ve varlıklar oluşturmak ve onları normal karakterlere geri çevirmek için 2 işlev yarattım. Aşağıdaki yöntemler herhangi bir dizeyi HTML varlıklarına ve String prototipine geri çevirir

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

Daha sonra aşağıdaki gibi kullanabilirsiniz:

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

Konsolda çıktı:

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

Herhangi bir kitaplık olmadan, IE <9'u desteklemeniz gerekmiyorsa, bir html öğesi oluşturabilir ve içeriğini Node.textContent ile ayarlayabilirsiniz :

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

İşte bir örnek: https://jsfiddle.net/1erdhehv/

Bunu kullanabilirsin.

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

Html varlıklarını birden fazla kodlamaktan kaçınmak istiyorsanız

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

# Misal

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>

HTML Özel Karakterleri ve ESCAPE CODES

Ayrılmış Karakterler HTML ile öncelenmelidir: HTML, XHTML veya XML'de herhangi bir Unicode karakterini [Örn: & - U + 00026] sadece ASCII karakterleri kullanarak temsil etmek için bir karakter kaçışını kullanabiliriz. Sayısal karakter referansları [ Ör: ve işareti (&) - &] & Adlandırılmış karakter referansları [Örn: &] türleridir character escape used in markup.

Önceden Tanımlanmış Varlıklar

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

HTML Etiketlerini kullandığımız web sayfasında normal bir form olarak görüntülemek için <pre>, <code>etiketler veya onlardan kaçabiliriz. Herhangi bir oluşum ile değiştirerek dize Kaçış "&"dize tarafından karakteri "&"ve herhangi oluşumları ">"dize ile karakteri ">". Ör: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=""/>

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

Bir dizi çözümü

Zaten jQuery kullanıyorsanız, deneyin html().

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

Bir bellek içi metin düğümü somutlaştırılır ve html()ona çağrılır.

Çirkin, hafızayı biraz boşa harcıyor ve hekütüphane kadar kapsamlı olup olmadığı hakkında hiçbir fikrim yok ama zaten jQuery kullanıyorsanız, belki bu sizin için bir seçenektir.

Blog gönderisinden alınmıştır HTML varlıklarını Felix Geisendörfer tarafından jQuery ile kodlayın .

Bazen sadece her karakteri kodlamak istersiniz ... Bu işlev regxp'deki "hiçbir şey hariç her şeyin" yerine geçer.

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>

Ourcodeworld Ourcodeworld'ün öğreticisine göz atın - html varlıklarını javascript ile kodlayın ve kodunu çözün

En önemlisi, kütüphane örneği

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'

Bu kütüphane muhtemelen kodlamanızı daha kolay ve daha iyi yönetir. Popülerdir, düzenli olarak güncellenir ve HTML spesifikasyonuna uyar. Package.json'da görülebileceği gibi, kendisinin bağımlılığı yoktur.

İşte kodlamayı nasıl uyguladım. Yukarıda verilen cevaplardan ilham aldım.

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

Sen kullanabilirsiniz charCodeAt()Belirtilen karakter yüksek 127 den bir değere sahip olmadığını kontrol edin ve kullanarak sayısal karakter referansı dönüştürmek yöntemi toString(16).

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