Javascript'te özel karakterleri HTML'ye dönüştürün

Herhangi bir özel karakterler dönüştürmek için nasıl biliyor mu HTMLiçinde Javascript?

Misal:

• &(ve işareti) olur &amp.
• "(çift tırnak) olur &quotzaman ENT_NOQUOTESayarlı değil.
• '(tek tırnak) &#039yalnızca ENT_QUOTESayarlandığında olur.
• <(küçüktür) olur &lt.
• >(büyüktür) olur &gt.

Gibi bir şey yapan bir işleve ihtiyacınız var

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

Ancak, tek / çift tırnak işaretlerini farklı şekilde ele alma isteğinizi hesaba katın.

Bence en iyi yol, birçok durumu ele almak için tarayıcının dahili HTML kaçış işlevini kullanmaktır. Bunu yapmak için sadece DOM ağacında bir öğe oluşturun ve innerTextbu öğenin dizesini ayarlayın. Ardından innerHTMLelementi alın. Tarayıcı, HTML kodlu bir dize döndürecektir.

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

Test sürüşü:

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

Çıktı:

&;'><"

Bu HTML'den kaçış yöntemi, verdiğim basit örnekten farklı olsa da Prototype JS kitaplığı tarafından da kullanılıyor .

Not: Yine de tırnak işaretlerinden (çift ve tek) kendiniz kaçmanız gerekecektir. Burada başkaları tarafından özetlenen yöntemlerden herhangi birini kullanabilirsiniz.

Bu genel işlev, alfabetik olmayan her karakteri htmlcode (sayısal) olarak kodlar:

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

Mozilla'dan ...

CharCodeAt'ın her zaman 65.536'dan daha küçük bir değer döndüreceğini unutmayın. Bunun nedeni, daha yüksek kod noktalarının, gerçek karakteri oluşturmak için kullanılan bir çift (daha düşük değerli) "vekil" sözde karakterlerle temsil edilmesidir. Bu nedenle, 65,536 ve üzeri değerdeki tek tek karakterlerin tam karakterini incelemek veya yeniden üretmek için, bu tür karakterler için yalnızca charCodeAt (i) değil, aynı zamanda charCodeAt (i + 1) 'i de (sanki inceleniyormuş gibi) almak gerekir. / iki> harfli bir dizeyi yeniden oluşturmak).

En iyi çözüm

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

Kullanım örneği:

html_encode("✈");

Dize kullanan bir işlev oluşturun 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;
}

Bir dizgede olduğu gibi bir tamsayı karakter kodunu çözmek isteyenler için &#xxx;bu işlevi kullanın:

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

As tarafından bahsedildi dragononunla yapmanın en temiz şekilde 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;' };
  dönüş str.replace (/ [<&> '"#] / g, işlev (ler) {dönüş c [s];});
}

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

Sonuç:

& Lt; - a-- & Sons; - a-- & gt; - amin - & # 039; - & # 035; - & # 039; - & gt;

Testarea etiketinde:

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

Uzun kodda küçük bir karakter değiştirirseniz ...

Bir PREetikette - ve diğer HTML etiketlerinin çoğunda - çıktı yeniden yönlendirme karakterlerini (<ve>) kullanan bir toplu iş dosyası için düz metin HTML'yi bozacaktır, ancak burada benim ipucum : bir TEXTAREAöğeye giren her şey - HTML, temel olarak bir kontrol örneğinin içinde olduğumuz ve işletim sistemi tarafından yönetildiğimiz için ve bu nedenle içeriği HTML motoru tarafından ayrıştırılmadığından.

Örnek olarak, toplu iş dosyamın sözdizimini javascript kullanarak vurgulamak istediğimi varsayalım. HTML ayrılmış karakterleri hakkında endişelenmeden kodu bir metin alanına yapıştırıyorum ve komut dosyasının innerHTML, ilgili ISO-8859-1 varlıklarıyla değiştirilen HTML ayrılmış karakterlerle metne değerlendiren textarea özelliğini işlemesini sağlıyorum .

Tarayıcılar , bir öğenin innerHTML(ve outerHTML) özelliğini aldığınızda özel karakterlerden otomatik olarak kaçar . Bir metin alanı kullanmak (ve kim bilir, belki metin türünün bir girdisi) sizi dönüşümü (manuel olarak veya kod yoluyla) yapmaktan kurtarır.

Sözdizimi vurgulayıcımı test etmek için bu numarayı kullanıyorum ve yazmayı ve test etmeyi bitirdiğimde, metin alanını görünümden gizlemem yeterli.

Tüm standartlaştırılmış adlandırılmış karakter referansları , unicode ve belirsiz ve işaretleri için desteğe ihtiyacınız varsa , o kütüphanesi bildiğim% 100 güvenilir tek çözümdür!

Örnek kullanım

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

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

geçici bir çözüm:

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

Şimdi kullandığımız başka bir tane çalışıyor. Yukarıdakilerden biri bunun yerine bir komut dosyası çağırıyor ve dönüştürülen kodu döndürüyor. Yalnızca küçük metin alanlarında iyidir (makale / blog vb. İle ilgili tam anlamıyla değil ...)

Yukarıdakiler için. Çoğu karakterde çalışır.

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("--", "--", "'",  "'",  '"',  '"',  "*",  "...", "™", "•", "•", "•", "¡", "¢", "£", "¤", "¥", "¦", "§", "¨", "©", "ª", "«", "¬", "­", "®", "¯", "°", "±", "²", "³", "´", "µ", "¶", "·", "¸", "¹", "º", "»", "¼", "½", "¾", "¿", "À", "Á", "Â", "Ã", "Ä", "Å", "Æ", "Ç", "È", "É", "Ê", "Ë", "Ì", "Í", "Î", "Ï", "Ð", "Ñ", "Ò", "Ó", "Ô", "Õ", "Ö", "×", "Ø", "Ù", "Ú", "Û", "Ü", "Ý", "Þ", "ß", "à", "á", "â", "ã", "ä", "å", "æ", "ç", "è", "é", "ê", "ë", "ì", "í", "î", "ï", "ð", "ñ", "ò", "ó", "ô", "õ", "ö", "÷", "ø", "ù", "ú", "û", "ü", "ý", "þ", "ÿ", "Œ", "œ", "Š", "š", "Ÿ", "ƒ");

Yukarıdakiler dahil birçok işlevi olan bir javascript dosyası oluşturuyorum. http://www.neotropicsolutions.com/JSChars.zip

Gerekli tüm dosyalar dahildir. JQuery 1.4.4'ü ekledim. Basitçe, diğer sürümlerde sorunları gördüğüm için, ancak henüz denemedim.

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>

Yukarıdaki kodu kullanarak özel karakterleri html'ye dönüştürebilirsiniz.

İşte bu bağlamda çok yararlı bulduğum iyi bir kitaplık.

https://github.com/mathiasbynens/he

Yazarına göre:

HTML'ye göre tüm standartlaştırılmış isimlendirilmiş karakter referanslarını destekler, belirsiz ve işaretlerini ve diğer uç durumları tıpkı bir tarayıcının yapacağı gibi işler, kapsamlı bir test paketine sahiptir ve - diğer birçok JavaScript çözümünün aksine - astral Unicode sembollerini gayet iyi kullanır.

İşte Jquery'ye ihtiyaç duymadan kullandığım birkaç yöntem:

Sen edebilirsiniz her karakteri kodlamak için dizede:

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

Veya endişeleneceğiniz ana güvenli kodlama karakterlerini (&, boşluksuz, <,>, "ve ') şu şekilde hedefleyin:

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

Bu, sorunuzu doğrudan yanıtlamaz, ancak innerHTMLbir öğenin içine metin yazmak için kullanıyorsanız ve kodlama sorunlarıyla karşılaşırsanız, yalnızca şunu kullanın textContent:

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

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

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

DOMParserÖzel karakter dönüşümü için javascript kullanabiliriz .

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

Aşağıda, JS'deki xml kaçış karakterlerini kodlamak için basit işlev verilmiştir

Encoder.htmlEncode (unsafeText);

.Text () işlevini .html () olarak değiştirerek düzeltebilirsiniz. benim için çalışıyor.

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

bunu test etmek için kullanın: http://www.w3schools.com/js/tryit.asp?filename=tryjs_text

Evet, ancak elde edilen dizeyi geri dönüştürülmeden bir yere eklemeniz gerekiyorsa, yapmanız gereken:

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

JavaScript htmlentities http://phpjs.org/functions/htmlentities:425'e bakın

Dizeleri kodlamanıza izin veren javaScript Function escape () kullanın .

Örneğin,

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;

}