Enkode entitas html dalam javascript

Saya bekerja di CMS yang memungkinkan pengguna memasukkan konten. Masalahnya adalah ketika mereka menambahkan simbol ®, itu mungkin tidak ditampilkan dengan baik di semua browser. Saya ingin membuat daftar simbol yang harus dicari, dan kemudian dikonversi ke entitas html yang sesuai. Sebagai contoh

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

Setelah konversi, itu perlu dibungkus dalam <sup>tag, menghasilkan ini:

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

Karena ukuran font dan gaya padding tertentu diperlukan:

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

Akankah JavaScript menjadi seperti ini?

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

Di mana "[?]" Berarti ada sesuatu yang saya tidak yakin.

Detil tambahan:

• Saya ingin melakukan ini dengan JavaScript murni, bukan sesuatu yang membutuhkan perpustakaan seperti jQuery, terima kasih.
• Backend adalah Ruby
• Menggunakan RefineryCMS yang dibangun dengan Ruby on Rails

Anda dapat menggunakan regex untuk mengganti karakter apa pun dalam rentang unicode tertentu dengan entitas html yang setara. Kode tersebut akan terlihat seperti ini:

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

Kode ini akan mengganti semua karakter dalam rentang yang diberikan (unicode 00A0 - 9999, serta ampersand, lebih besar & kurang dari) dengan entitas html yang setara, yang merupakan &#nnn;asal nnndari nilai unicode charCodeAt.

Lihat aksinya di sini: http://jsfiddle.net/E3EqX/13/ (contoh ini menggunakan jQuery untuk pemilih elemen yang digunakan dalam contoh. Kode dasar itu sendiri, di atas, tidak menggunakan jQuery)

Membuat konversi ini tidak menyelesaikan semua masalah - pastikan Anda menggunakan pengkodean karakter UTF8, pastikan database Anda menyimpan string dalam UTF8. Anda mungkin masih melihat kejadian di mana karakter tidak ditampilkan dengan benar, tergantung pada konfigurasi font sistem dan masalah lain di luar kendali Anda.

Dokumentasi

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

Jawaban yang diterima saat ini memiliki beberapa masalah. Posting ini menjelaskannya, dan menawarkan solusi yang lebih kuat. Solusi yang disarankan dalam jawaban itu sebelumnya memiliki:

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

The ibendera berlebihan karena tidak ada simbol Unicode di kisaran dari U + 00A0 untuk U + 9999 memiliki huruf besar / huruf kecil varian yang berada di luar kisaran yang sama.

The mbendera berlebihan karena ^atau $tidak digunakan dalam ekspresi reguler.

Mengapa rentang U + 00A0 hingga U + 9999? Sepertinya sewenang-wenang.

Bagaimanapun, untuk solusi yang dengan benar mengkodekan semua kecuali simbol ASCII yang aman & dapat dicetak dalam input (termasuk simbol astral!), Dan menerapkan semua referensi karakter bernama (tidak hanya yang ada di HTML4), gunakan pustaka he (penafian: Pustaka ini milik saya ). Dari README-nya:

he (untuk "entitas HTML") adalah pembuat enkode / dekoder entitas HTML yang kuat yang ditulis dalam JavaScript. Ini mendukung semua referensi karakter bernama standar sesuai HTML , menangani ampersand ambigu dan kasus tepi lainnya seperti browser , memiliki rangkaian pengujian yang luas, dan - bertentangan dengan banyak solusi JavaScript lainnya - ia menangani simbol Unicode astral dengan baik. Demo online tersedia.

Juga lihat jawaban Stack Overflow yang relevan ini .

Saya memiliki masalah yang sama dan membuat 2 fungsi untuk membuat entitas dan menerjemahkannya kembali ke karakter normal. Metode berikut menerjemahkan string apa pun ke entitas HTML dan kembali ke prototipe String

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

Anda kemudian dapat menggunakannya sebagai berikut:

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

Output di konsol:

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

Tanpa pustaka apa pun, jika Anda tidak perlu mendukung IE <9, Anda dapat membuat elemen html dan mengatur isinya dengan Node.textContent :

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

Berikut ini contohnya: https://jsfiddle.net/1erdhehv/

Anda bisa menggunakan ini.

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

Jika Anda ingin menghindari encode entitas html lebih dari sekali

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

# Contoh

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>

Karakter Khusus HTML & nya ESCAPE CODES

Karakter yang Dicadangkan harus di-escape oleh HTML: Kita dapat menggunakan karakter escape untuk mewakili karakter Unicode apa pun [Contoh: & - U + 00026] dalam HTML, XHTML atau XML hanya menggunakan karakter ASCII. Referensi karakter numerik [ Mis: ampersand (&) - &] & Referensi karakter bernama [Ex: &] adalah tipe dari character escape used in markup.

Entitas yang Ditetapkan Sebelumnya

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

Untuk menampilkan Tag HTML sebagai bentuk normal di halaman web yang kita gunakan <pre>, <code>tag atau kita dapat menghindarinya. Meloloskan diri dari string dengan mengganti kemunculan "&"karakter apa pun dengan string "&"dan kemunculan ">"karakter apa pun dengan string ">". Ex: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);
}

Solusi array

Jika Anda sudah menggunakan jQuery, coba html().

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

Node teks dalam memori dibuat, dan html()dipanggil di atasnya.

Itu jelek, itu membuang sedikit memori, dan saya tidak tahu apakah itu selengkap sesuatu seperti heperpustakaan tetapi jika Anda sudah menggunakan jQuery, mungkin ini adalah pilihan untuk Anda.

Diambil dari posting blog Menyandikan entitas HTML dengan jQuery oleh Felix Geisendörfer.

Terkadang Anda hanya ingin menyandikan setiap karakter ... Fungsi ini menggantikan "semuanya kecuali tidak ada" di 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>

Lihat tutorial dari Ourcodeworld Ourcodeworld - menyandikan dan mendekode entitas html dengan javascript

Yang terpenting, contoh perpustakaan he

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'

Perpustakaan ini mungkin akan membuat pengkodean Anda lebih mudah dan dikelola dengan lebih baik. Ini populer, diperbarui secara rutin dan mengikuti spesifikasi HTML. Itu sendiri tidak memiliki ketergantungan, seperti yang bisa dilihat di package.json

Inilah cara saya menerapkan pengkodean. Saya mengambil inspirasi dari jawaban yang diberikan di atas.

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

Anda dapat menggunakan charCodeAt()metode ini untuk memeriksa apakah karakter yang ditentukan memiliki nilai lebih tinggi dari 127 dan mengubahnya menjadi referensi karakter numerik menggunakan 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;
}