Ubah karakter khusus menjadi HTML dalam Javascript

Apakah ada yang tahu cara mengubah karakter khusus menjadi HTMLin Javascript?

Contoh:

• &(ampersand) menjadi &amp.
• "(kutip ganda) menjadi &quotsaat ENT_NOQUOTEStidak disetel.
• '(kutipan tunggal) menjadi &#039hanya jika ENT_QUOTESdisetel.
• <(kurang dari) menjadi &lt.
• >(lebih besar dari) menjadi &gt.

Anda membutuhkan fungsi yang melakukan sesuatu seperti

return mystring.replace(/&/g, "&amp;").replace(/>/g, "&gt;").replace(/</g, "&lt;").replace(/"/g, "&quot;");

Tetapi dengan mempertimbangkan keinginan Anda untuk penanganan tanda kutip tunggal / ganda yang berbeda.

Cara terbaik menurut saya adalah dengan menggunakan fungsi pelolosan HTML bawaan browser untuk menangani banyak kasus. Untuk melakukan ini, cukup buat elemen di pohon DOM dan setel innerTextelemen tersebut ke string Anda. Kemudian ambil innerHTMLelemennya. Browser akan mengembalikan string yang dikodekan HTML.

function HtmlEncode(s)
{
  var el = document.createElement("div");
  el.innerText = el.textContent = s;
  s = el.innerHTML;
  return s;
}

Uji coba:

alert(HtmlEncode('&;\'><"'));

Keluaran:

&;'><"

Metode pelolosan HTML ini juga digunakan oleh pustaka Prototipe JS meskipun berbeda dari contoh sederhana yang saya berikan.

Catatan: Anda masih perlu menghilangkan tanda kutip (ganda dan tunggal) sendiri. Anda dapat menggunakan salah satu metode yang dijelaskan oleh orang lain di sini.

Fungsi umum ini mengkodekan setiap karakter non alfabet ke kode html-nya (numerik):

function HTMLEncode(str) {
    var i = str.length,
        aRet = [];

    while (i--) {
        var iC = str[i].charCodeAt();
        if (iC < 65 || iC > 127 || (iC>90 && iC<97)) {
            aRet[i] = '&#'+iC+';';
        } else {
            aRet[i] = str[i];
        }
    }
    return aRet.join('');
}

Dari Mozilla ...

Perhatikan bahwa charCodeAt akan selalu mengembalikan nilai yang kurang dari 65.536. Ini karena poin kode yang lebih tinggi diwakili oleh sepasang karakter pseudo "pengganti" (bernilai lebih rendah) yang digunakan untuk membentuk karakter sebenarnya. Oleh karena itu, untuk memeriksa atau mereproduksi karakter lengkap untuk karakter individu bernilai 65.536 ke atas, untuk karakter seperti itu, perlu untuk mengambil tidak hanya charCodeAt (i), tetapi juga charCodeAt (i + 1) (seolah-olah memeriksa / mereproduksi string dengan dua> huruf).

Solusi terbaik

/**
 * (c) 2012 Steven Levithan <http://slevithan.com/>
 * MIT license
 */
if (!String.prototype.codePointAt) {
    String.prototype.codePointAt = function (pos) {
        pos = isNaN(pos) ? 0 : pos;
        var str = String(this),
            code = str.charCodeAt(pos),
            next = str.charCodeAt(pos + 1);
        // If a surrogate pair
        if (0xD800 <= code && code <= 0xDBFF && 0xDC00 <= next && next <= 0xDFFF) {
            return ((code - 0xD800) * 0x400) + (next - 0xDC00) + 0x10000;
        }
        return code;
    };
}

/**
 * Encodes special html characters
 * @param string
 * @return {*}
 */
function html_encode(string) {
    var ret_val = '';
    for (var i = 0; i < string.length; i++) { 
        if (string.codePointAt(i) > 127) {
            ret_val += '&#' + string.codePointAt(i) + ';';
        } else {
            ret_val += string.charAt(i);
        }
    }
    return ret_val;
}

Contoh penggunaan:

html_encode("✈");

Buat fungsi yang menggunakan string replace

function convert(str)
{
  str = str.replace(/&/g, "&");
  str = str.replace(/>/g, ">");
  str = str.replace(/</g, "&lt;");
  str = str.replace(/"/g, "&quot;");
  str = str.replace(/'/g, "&#039;");
  return str;
}

Bagi mereka yang ingin mendekode kode karakter integer seperti &#xxx;di dalam string, gunakan fungsi ini:

function decodeHtmlCharCodes(str) { 
  return str.replace(/(&#(\d+);)/g, function(match, capture, charCode) {
    return String.fromCharCode(charCode);
  });
}

// Will output "The show that gained int’l reputation’!"
console.log(decodeHtmlCharCodes('The show that gained int’l reputation’!'));

ES6

const decodeHtmlCharCodes = str => 
  str.replace(/(&#(\d+);)/g, (match, capture, charCode) => 
    String.fromCharCode(charCode));

// Will output "The show that gained int’l reputation’!"
console.log(decodeHtmlCharCodes('The show that gained int’l reputation’!'));

function char_convert() {

    var chars = ["©","Û","®","ž","Ü","Ÿ","Ý","$","Þ","%","¡","ß","¢","à","£","á","À","¤","â","Á","¥","ã","Â","¦","ä","Ã","§","å","Ä","¨","æ","Å","©","ç","Æ","ª","è","Ç","«","é","È","¬","ê","É","­","ë","Ê","®","ì","Ë","¯","í","Ì","°","î","Í","±","ï","Î","²","ð","Ï","³","ñ","Ð","´","ò","Ñ","µ","ó","Õ","¶","ô","Ö","·","õ","Ø","¸","ö","Ù","¹","÷","Ú","º","ø","Û","»","ù","Ü","@","¼","ú","Ý","½","û","Þ","€","¾","ü","ß","¿","ý","à","‚","À","þ","á","ƒ","Á","ÿ","å","„","Â","æ","…","Ã","ç","†","Ä","è","‡","Å","é","ˆ","Æ","ê","‰","Ç","ë","Š","È","ì","‹","É","í","Œ","Ê","î","Ë","ï","Ž","Ì","ð","Í","ñ","Î","ò","‘","Ï","ó","’","Ð","ô","“","Ñ","õ","”","Ò","ö","•","Ó","ø","–","Ô","ù","—","Õ","ú","˜","Ö","û","™","×","ý","š","Ø","þ","›","Ù","ÿ","œ","Ú"]; 
    var codes = ["©","Û","®","ž","Ü","Ÿ","Ý","$","Þ","%","¡","ß","¢","à","£","á","À","¤","â","Á","¥","ã","Â","¦","ä","Ã","§","å","Ä","¨","æ","Å","©","ç","Æ","ª","è","Ç","«","é","È","¬","ê","É","­","ë","Ê","®","ì","Ë","¯","í","Ì","°","î","Í","±","ï","Î","²","ð","Ï","³","ñ","Ð","´","ò","Ñ","µ","ó","Õ","¶","ô","Ö","·","õ","Ø","¸","ö","Ù","¹","÷","Ú","º","ø","Û","»","ù","Ü","@","¼","ú","Ý","½","û","Þ","€","¾","&#252","ß","¿","ý","à","‚","À","þ","á","ƒ","Á","ÿ","å","„","Â","æ","…","Ã","ç","†","Ä","è","‡","Å","é","ˆ","Æ","ê","‰","Ç","ë","Š","È","ì","‹","É","í","Œ","Ê","î","Ë","ï","Ž","Ì","ð","Í","ñ","Î","ò","‘","Ï","ó","’","Ð","ô","“","Ñ","õ","”","Ò","ö","•","Ó","ø","–","Ô","ù","—","Õ","ú","˜","Ö","û","™","×","ý","š","Ø","þ","›","Ù","ÿ","œ","Ú"];

    for(x=0; x<chars.length; x++){
        for (i=0; i<arguments.length; i++){
            arguments[i].value = arguments[i].value.replace(chars[x], codes[x]);
        }
    }
 }

char_convert(this);

Seperti yang telah disebutkan dragon, cara terbersih untuk melakukannya adalah dengan jQuery:

function HtmlEncode(s) {
    return $('<div>').text(s).html();
}

function HtmlDecode(s) {
    return $('<div>').html(s).text();
}

function ConvChar (str) {
  c = {'<': '& lt;', '>': '& gt;', '&': '& amp;', '"': '& quot;'," '":' & # 039; ',
       '#': '& # 035;' };
  return str.replace (/ [<&> '"#] / g, function (s) {return c [s];});
}

peringatan (ConvChar ('<- "- & -" -> - <- \' - # - \ '->'));

Hasil:

& lt; - & quot; - & amp; - & quot; - & gt; - & lt; - & # 039; - & # 035; - & # 039; - & gt;

Dalam tag testarea:

<- "- & -" -> - <-'- # -'->

Jika Anda hanya akan mengubah sedikit karakter dalam kode panjang ...

Dalam PREtag -dan di sebagian besar tag HTML lainnya- teks biasa untuk file batch yang menggunakan karakter pengalihan keluaran (<dan>) ​​akan merusak HTML, tetapi berikut tip saya : apa pun yang masuk dalam TEXTAREAelemen -it tidak akan merusak HTML, terutama karena kita berada di dalam kontrol yang dijalankan dan ditangani oleh OS, dan oleh karena itu isinya tidak diurai oleh mesin HTML.

Sebagai contoh, katakanlah saya ingin menyorot sintaks file batch saya menggunakan javascript. Saya cukup menempelkan kode di area teks tanpa mengkhawatirkan karakter khusus HTML, dan meminta skrip memproses innerHTMLproperti area teks, yang mengevaluasi ke teks dengan karakter khusus HTML diganti dengan entitas ISO-8859-1 yang sesuai.

Browser akan keluar dari karakter khusus secara otomatis saat Anda mengambil properti innerHTML(dan outerHTML) dari sebuah elemen. Menggunakan textarea (dan siapa tahu, mungkin input teks tipe) hanya menyelamatkan Anda dari melakukan konversi (secara manual atau melalui kode).

Saya menggunakan trik ini untuk menguji penyorot sintaks saya, dan ketika saya selesai membuat dan menguji, saya cukup menyembunyikan area teks dari tampilan.

Jika Anda memerlukan dukungan untuk semua referensi karakter bernama standar , unicode , dan ampersand ambigu , pustaka he adalah satu-satunya solusi andal 100% yang saya ketahui!

Contoh penggunaan

he.encode('foo © bar ≠ baz 𝌆 qux'); 
// Output : 'foo © bar ≠ baz 𝌆 qux'

he.decode('foo © bar ≠ baz 𝌆 qux');
// Output : 'foo © bar ≠ baz 𝌆 qux'

solusi:

var temp = $("div").text("<");
var afterEscape = temp.html(); // afterEscape == "&lt;"

var swapCodes   = new Array(8211, 8212, 8216, 8217, 8220, 8221, 8226, 8230, 8482, 169, 61558, 8226, 61607);
var swapStrings = new Array("--", "--", "'",  "'",  '"',  '"',  "*",  "...", "™", "©", "•", "•", "•");

var TextCheck = {
    doCWBind:function(div){
        $(div).bind({
            bind:function(){
                TextCheck.cleanWord(div);
            },
            focus:function(){
                TextCheck.cleanWord(div);
            },
            paste:function(){
                TextCheck.cleanWord(div);
            }
        }); 
    },
    cleanWord:function(div){
        var output = $(div).val();
        for (i = 0; i < swapCodes.length; i++) {
            var swapper = new RegExp("\\u" + swapCodes[i].toString(16), "g");
            output = output.replace(swapper, swapStrings[i]);
        }
        $(div).val(output);
    }
}

Satu lagi yang kami gunakan sekarang yang berfungsi. Satu di atas saya memilikinya memanggil skrip dan mengembalikan kode yang dikonversi. Hanya bagus untuk textarea kecil (artinya tidak lengkap di artikel / blog dll ...)

Untuk Di Atas. Bekerja pada sebagian besar karakter.

var swapCodes   = new Array(8211, 8212, 8216, 8217, 8220, 8221, 8226, 8230, 8482, 61558, 8226, 61607,161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 250, 251, 252, 253, 254, 255, 338, 339, 352, 353, 376, 402);
var swapStrings = new Array("--", "--", "'",  "'",  '"',  '"',  "*",  "...", "™", "•", "•", "•", "¡", "¢", "£", "¤", "¥", "¦", "§", "¨", "©", "ª", "«", "¬", "­", "®", "¯", "°", "±", "²", "³", "´", "µ", "¶", "·", "¸", "¹", "º", "»", "¼", "½", "¾", "¿", "À", "Á", "Â", "Ã", "Ä", "Å", "Æ", "Ç", "È", "É", "Ê", "Ë", "Ì", "Í", "Î", "Ï", "Ð", "Ñ", "Ò", "Ó", "Ô", "Õ", "Ö", "×", "Ø", "Ù", "Ú", "Û", "Ü", "Ý", "Þ", "ß", "à", "á", "â", "ã", "ä", "å", "æ", "ç", "è", "é", "ê", "ë", "ì", "í", "î", "ï", "ð", "ñ", "ò", "ó", "ô", "õ", "ö", "÷", "ø", "ù", "ú", "û", "ü", "ý", "þ", "ÿ", "Œ", "œ", "Š", "š", "Ÿ", "ƒ");

Saya membuat file javascript yang memiliki banyak fungsi termasuk di atas. http://www.neotropicsolutions.com/JSChars.zip

Semua file yang dibutuhkan disertakan. Saya menambahkan jQuery 1.4.4. Hanya karena saya melihat masalah di versi lain, belum mencobanya.

Requires: jQuery & jQuery Impromptu from: http://trentrichardson.com/Impromptu/index.php

1. Word Count
2. Character Conversion
3. Checks to ensure this is not passed: "notsomeverylongstringmissingspaces"
4. Checks to make sure ALL IS NOT ALL UPPERCASE.
5. Strip HTML

    // Word Counter
    $.getScript('js/characters.js',function(){
            $('#adtxt').bind("keyup click blur focus change paste",
                function(event){
                    TextCheck.wordCount(30, "#adtxt", "#adtxt_count", event);
            });
            $('#adtxt').blur(
                function(event){
                    TextCheck.check_length('#adtxt'); // unsures properly spaces-not one long word
                    TextCheck.doCWBind('#adtxt');// char conversion
            });

            TextCheck.wordCount(30, "#adtxt", "#adtxt_count", false);
        });

    //HTML
    <textarea name="adtxt" id="adtxt" rows="10" cols="70" class="wordCount"></textarea>
<div id="adtxt_count" class="clear"></div>

    // Just Character Conversions:
    TextCheck.doCWBind('#myfield');

    // Run through form fields in a form for case checking.
    // Alerts user when field is blur'd.
    var labels = new Array("Brief Description","Website URL","Contact Name","Website","Email","Linkback URL");
    var checking = new Array("descr","title","fname","website","email","linkback");
    TextCheck.check_it(checking,labels);

    // Extra security to check again, make sure form is not submitted
    var pass = TextCheck.validate(checking,labels);
    if(pass){
        //do form actions
    }


    //Strip HTML
    <textarea name="adtxt" id="adtxt" rows="10" cols="70" onblur="TextCheck.stripHTML(this);"></textarea>

 <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>html</title>  
      <script>
      $(function() {   
      document.getElementById('test').innerHTML = "&amp;";
      });

      </script>
    </head>
    <body>
    <div id="test"></div>
    </body>
    </html>

Anda cukup mengubah karakter khusus ke html menggunakan kode di atas.

Inilah perpustakaan bagus yang menurut saya sangat berguna dalam konteks ini.

https://github.com/mathiasbynens/he

Menurut penulisnya:

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

Berikut adalah beberapa metode yang saya gunakan tanpa memerlukan Jquery:

Anda dapat menyandikan setiap karakter dalam string Anda:

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

Atau cukup targetkan karakter enkode aman utama untuk dikhawatirkan (&, inebreaks, <,>, "dan ') seperti:

function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}

test.value=encode('How to encode\nonly html tags &<>\'" nice & fast!');

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/

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

function escape (text)
{
  return text.replace(/[<>\&\"\']/g, function(c) {
    return '&#' + c.charCodeAt(0) + ';';
  });
}

alert(escape("<>&'\""));

Ini tidak langsung menjawab pertanyaan Anda, tetapi jika Anda menggunakan innerHTMLuntuk menulis teks dalam elemen dan Anda mengalami masalah encoding, cukup gunakan textContent, yaitu:

var s = "Foo 'bar' baz <qux>";

var element = document.getElementById('foo');
element.textContent = s;

// <div id="foo">Foo 'bar' baz <qux></div>

Kita dapat menggunakan javascript DOMParseruntuk konversi karakter khusus.

const parser = new DOMParser();
const convertedValue = (parser.parseFromString("&#039 &amp &#039 &lt &gt", "application/xml").body.innerText;

Berikut adalah fungsi sederhana untuk mengenkode karakter escape xml di JS

Encoder.htmlKode Kode (unsafeText);

Anda dapat memperbaikinya dengan mengganti fungsi .text () menjadi .html (). itu bekerja untuk saya.

<html>
<body>
<script type="text/javascript">
var str= "&\"'<>";
alert('B4 Change:\n' + str);
str= str.replace(/\&/g,'&amp;');
str= str.replace(/</g,'&lt;');
str= str.replace(/>/g,'&gt;');
str= str.replace(/\"/g,'&quot;');
str= str.replace(/\'/g,'&#039;');
alert('After change:\n' + str);
</script>
</body>
</html>      

gunakan ini untuk menguji: http://www.w3schools.com/js/tryit.asp?filename=tryjs_text

Ya, tetapi jika Anda perlu memasukkan string yang dihasilkan di suatu tempat tanpa mengubahnya kembali, Anda perlu melakukan:

str.replace(/'/g,"'"); // and so on

Lihat JavaScript htmlentities http://phpjs.org/functions/htmlentities:425

Gunakan javaScript Function escape () , yang memungkinkan Anda menyandikan string.

misalnya,

escape("yourString");

public static string HtmlEncode (string text)
{
    string result;
    using (StringWriter sw = new StringWriter())
    {
        var x = new HtmlTextWriter(sw);
        x.WriteEncodedText(text);
        result = sw.ToString();
    }
    return result;

}