Javascript HtmlSpecialChars eşdeğeri?

Görünüşe göre, bu düşündüğümden daha zor. Ve hatta çok basit ...

Javascript içine yerleşik PHP'nin htmlspecialchars eşdeğer bir işlevi var mı? Bunu kendiniz uygulamanın oldukça kolay olduğunu biliyorum, ancak varsa yerleşik bir işlevi kullanmak sadece daha güzel.

PHP'ye aşina olmayanlar için htmlspecialchars <htmltag/>,<htmltag/>

Bunu biliyorum escape()ve encodeURI()bu şekilde çalışmaz.

Çözüm kodunuzla ilgili bir sorun var - sadece her özel karakterin ilk oluşumundan kaçacak. Örneğin:

escapeHtml('Kip\'s <b>evil</b> "test" code\'s here');
Actual:   Kip&#039;s &lt;b&gt;evil</b> &quot;test" code's here
Expected: Kip&#039;s &lt;b&gt;evil&lt;/b&gt; &quot;test&quot; code&#039;s here

İşte düzgün çalışan kod:

function escapeHtml(text) {
  return text
      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
}

Güncelleme

Aşağıdaki kod, yukarıdakilerle aynı sonuçları verecektir, ancak özellikle büyük metin bloklarında daha iyi performans gösterir (teşekkürler jbo5112 ).

function escapeHtml(text) {
  var map = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };
  
  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

Bu HTML Kodlaması. Bunu yapmak için hiçbir yerel javascript işlevi yoktur, ancak google ve bazı güzel bitmiş olanlar alabilirsiniz.

Örneğin, http://sanzon.wordpress.com/2008/05/01/neat-little-html-encoding-trick-in-javascript/

EDIT:
Ben test ettik budur:

var div = document.createElement('div');
  var text = document.createTextNode('<htmltag/>');
  div.appendChild(text);
  console.log(div.innerHTML);

Çıktı: <htmltag/>

Okumaya değer: http://bigdingus.com/2007/12/29/html-escaping-in-javascript/

escapeHTML: (function() {
 var MAP = {
   '&': '&',
   '<': '&lt;',
   '>': '&gt;',
   '"': '&#34;',
   "'": '&#39;'
 };
  var repl = function(c) { return MAP[c]; };
  return function(s) {
    return s.replace(/[&<>'"]/g, repl);
  };
})()

Not : Bunu yalnızca bir kez çalıştırın. Ve mesela zaten kodlanmış dizeleri üzerinde çalışmaz &hale gelir&

JQuery ile şöyle olabilir:

var escapedValue = $('<div/>').text(value).html();

İlgili sorudan jQuery ile HTML dizelerinden kaçma

Yorumda belirtildiği gibi, çift tırnak ve tek tırnak bu uygulama için olduğu gibi bırakılmıştır. Ham html dizesi olarak element özniteliği yapmanız gerekiyorsa bu çözümün kullanılmaması gerektiği anlamına gelir.

İşte HTML'den kaçmak için bir fonksiyon:

function escapeHtml(str)
{
    var map =
    {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return str.replace(/[&<>"']/g, function(m) {return map[m];});
}

Ve kod çözmek için:

function decodeHtml(str)
{
    var map =
    {
        '&': '&',
        '&lt;': '<',
        '&gt;': '>',
        '&quot;': '"',
        '&#039;': "'"
    };
    return str.replace(/&amp;|&lt;|&gt;|&quot;|&#039;/g, function(m) {return map[m];});
}

Underscore.js bunun için bir işlev sağlar:

_.escape(string)

HTML'ye eklemek, &, <,>, "ve 'karakterlerini değiştirmek için bir dizeden kaçar.

http://underscorejs.org/#escape

Bu yerleşik bir Javascript işlevi değildir, ancak zaten Underscore kullanıyorsanız, dönüştürülecek dizeleriniz çok büyük değilse kendi işlevinizi yazmaktan daha iyi bir alternatiftir.

Yine başka bir şey, tüm karakter eşlemesini tamamen bırakmak ve bunun yerine tüm istenmeyen karakterleri ilgili sayısal karakter referanslarına dönüştürmektir, örneğin:

function escapeHtml(raw) {
    return raw.replace(/[&<>"']/g, function onReplace(match) {
        return '&#' + match.charCodeAt(0) + ';';
    });
}

Not Belirtilen RegEx sadece OP HTML kullanılacak gidiyor kaçtığını bağlamına göre kaçmak istedi ama o belirli karakterleri işleme, bu karakterler yeterli olmayabilir. Ryan Grove'un makalesi HTML'den kaçmak için &, <,> ve " ifadelerinden daha fazlası var.

var regex = /[&<>"'` !@$%()=+{}[\]]/g

String.prototype.escapeHTML = function() {
        return this.replace(/&/g, "&")
                   .replace(/</g, "&lt;")
                   .replace(/>/g, "&gt;")
                   .replace(/"/g, "&quot;")
                   .replace(/'/g, "&#039;");
    }

örneklem :

var toto = "test<br>";
alert(toto.escapeHTML());

Muhtemelen böyle bir işleve ihtiyacınız yoktur. Kodunuz zaten tarayıcıda * olduğundan, gerçekte kullanılacak tarayıcı tarafından geriye doğru deşifre edilmesi gereken HTML oluşturmak ve kodlamak yerine DOM'a doğrudan erişebilirsiniz.

innerTextDOM'a düz metin eklemek için, sunulan çıkış işlevlerinden herhangi birini kullanmaktan çok daha hızlı bir özellik kullanın . Statik bir preen kodlu dize atamaktan bile daha hızlıinnerHTML .

Kullanım classListdüzenleme sınıflarına, datasetseti için data-nitelikler vesetAttribute diğerleri için.

Bunların hepsi sizin için kaçmayı başaracak. Daha kesin olarak, kaçış gerekmez ve DOM'un metinsel temsili HTML üzerinde çalıştığınız için ** altında kodlama yapılmaz.

// use existing element
var author = 'John "Superman" Doe <john@example.com>';
var el = document.getElementById('first');
el.dataset.author = author;
el.textContent = 'Author: '+author;

// or create a new element
var a = document.createElement('a');
a.classList.add('important');
a.href = '/search?q=term+"exact"&n=50';
a.textContent = 'Search for "exact" term';
document.body.appendChild(a);

// actual HTML code
console.log(el.outerHTML);
console.log(a.outerHTML);

.important { color: red; }

<div id="first"></div>

* Bu yanıt, sunucu tarafı JavaScript kullanıcıları (Node.js vb.) İçin değildir. ) İçin değildir.

** Açıkça gerçek HTML'ye dönüştürmediğiniz sürece. Örneğin, erişerek innerHTML- $('<div/>').text(value).html();diğer yanıtlarda önerilen çalıştırdığınızda olan şey budur . Dolayısıyla nihai hedefiniz belgeye bazı veriler eklemekse, bunu yaparak işi iki kez yapacaksınız. Ayrıca, elde edilen HTML'de her şeyin kodlanmadığını, yalnızca geçerli olması için gereken minimum değeri görebilirsiniz. Bağlama bağlı olarak yapılır, bu nedenle bu jQuery yöntemi tırnak kodlaması yapmaz ve bu nedenle genel amaçlı bir escaper olarak kullanılmamalıdır. Bir özniteliğin değeri yerine güvenilmeyen veya tırnak işareti içeren veriler içeren bir dize olarak HTML oluştururken tırnaklardan kaçmak gerekir. DOM API'sini kullanırsanız, kaçmayı hiç önemsemeniz gerekmez.

Node.JS kullanıcıları (veya tarayıcıda Jade çalışma zamanını kullanan kullanıcılar) için Jade'in kaçış işlevini kullanabilirsiniz.

require('jade').runtime.escape(...);

Başkasının bakımını üstlenmesi halinde kendiniz yazmanın bir anlamı yok. :)

Ben okw'un cevabına biraz ayrıntı veriyorum.

Bunun için tarayıcının DOM işlevlerini kullanabilirsiniz.

var utils = {
    dummy: document.createElement('div'),
    escapeHTML: function(s) {
        this.dummy.textContent = s
        return this.dummy.innerHTML
    }
}

utils.escapeHTML('<escapeThis>&')

Bu geri döner <escapeThis>&

createElementGörünmez bir öğe oluşturmak için standart işlevi kullanır, daha sonra textContentherhangi bir dizeyi içerik olarak ayarlamak ve ardından innerHTMLiçeriği HTML temsiline almak için işlevi kullanır .

function htmlspecialchars(str) {
 if (typeof(str) == "string") {
  str = str.replace(/&/g, "&"); /* must do & first */
  str = str.replace(/"/g, """);
  str = str.replace(/'/g, "'");
  str = str.replace(/</g, "&lt;");
  str = str.replace(/>/g, "&gt;");
  }
 return str;
 }

Umarım bu performansından dolayı yarışı kazanır ve en önemlisi .replace ('&', '&') kullanarak zincirleme bir mantık değil. Değiştir ('<', '<') ...

var mapObj = {
   '&':"&",
   '<':"&lt;",
   '>':"&gt;",
   '"':"&quot;",
   '\'':"&#039;"
};
var re = new RegExp(Object.keys(mapObj).join("|"),"gi");

function escapeHtml(str) 
{   
    return str.replace(re, function(matched)
    {
        return mapObj[matched.toLowerCase()];
    });
}

console.log('<script type="text/javascript">alert('Hello World');</script>');
console.log(escapeHtml('<script type="text/javascript">alert('Hello World');</script>'));

Tersine çevrilmiş:

function decodeHtml(text) {
    return text
        .replace(/&/g, '&')
        .replace(/&lt;/ , '<')
        .replace(/&gt;/, '>')
        .replace(/&quot;/g,'"')
        .replace(/&#039;/g,"'");
}

OWASP , alfasayısal karakterler için "[e] xcept, ASCII değerleri 256 olan tüm karakterlerden [&#xHH; değiştirilmesini önlemek için (veya varsa bir adlandırılmış varlıktan) ."

İşte bir kullanım örneği ile bunu yapan bir işlev:

function escapeHTML(unsafe) {
  return unsafe.replace(
    /[\u0000-\u002F]|[\u003A-\u0040]|[\u005B-\u00FF]/g,
    c => '&#' + ('000' + c.charCodeAt(0)).substr(-4, 4) + ';'
  )
}
document.querySelector('div').innerHTML =
  '<span class=' +
  escapeHTML('this should break it! " | / % * + , - / ; < = > ^') +
  '>' +
  escapeHTML('<script>alert("inspect the attributes")\u003C/script>') +
  '</span>'

<div></div>

function htmlEscape(str){
    return str.replace(/[&<>'"]/g,x=>'&#'+x.charCodeAt(0)+';')
}

Örnek Bu çözüm, karakter sayısal kodu kullanır <ile değiştirilir< .

Performansı bir harita kullanan çözümden biraz daha kötü olmasına rağmen , avantajları vardır:

• Bir kitaplığa veya DOM'a bağlı değil
• Hatırlaması oldukça kolay (5 HTML kaçış karakterini ezberlemenize gerek yok)
• Küçük kod
• Oldukça hızlı (5 zincirli yedek parçadan hala daha hızlı)