Odpowiednik HtmlSpecialChars w JavaScript?

Najwyraźniej jest to trudniejsze do znalezienia, niż myślałem. I to nawet jest takie proste ...

Czy istnieje odpowiednik funkcji htmlspecialchars PHP wbudowanej w Javascript? Wiem, że jest to dość łatwe do zaimplementowania samodzielnie, ale korzystanie z wbudowanej funkcji, jeśli jest dostępna, jest po prostu przyjemniejsze.

Dla tych, którzy nie znają PHP, htmlspecialchars tłumaczy takie rzeczy jak <htmltag/>na<htmltag/>

Wiem o tym escape()i encodeURI()nie działam w ten sposób.

Wystąpił problem z kodem rozwiązania - będzie on zmieniał się tylko przed pierwszym wystąpieniem każdego znaku specjalnego. Na przykład:

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

Oto kod, który działa poprawnie:

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

Aktualizacja

Poniższy kod da identyczne wyniki jak powyższy, ale działa lepiej, szczególnie w przypadku dużych bloków tekstu (dzięki jbo5112 ).

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

To jest kodowanie HTML. Nie ma do tego natywnej funkcji javascript, ale możesz wygooglować i uzyskać kilka ładnie wykonanych.

Np. Http://sanzon.wordpress.com/2008/05/01/neat-little-html-encoding-trick-in-javascript/

EDYCJA:
Oto, co przetestowałem:

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

Wynik: <htmltag/>

Warto przeczytać: 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);
  };
})()

Uwaga : uruchom to tylko raz. I nie uruchamiaj go na już zakodowanych łańcuchach, np. &Staje się&

Z jQuery może wyglądać tak:

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

Z pokrewnego pytania Escapowanie ciągów HTML za pomocą jQuery

Jak wspomniano w komentarzu, dla tej implementacji podwójne cudzysłowy i pojedyncze cudzysłowy są pozostawione bez zmian. Oznacza to, że to rozwiązanie nie powinno być używane, jeśli chcesz utworzyć atrybut elementu jako nieprzetworzony ciąg html.

Oto funkcja umożliwiająca ucieczkę z HTML:

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

I odszyfrować:

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 udostępnia do tego funkcję:

_.escape(string)

Ucieka ciąg znaków do wstawienia do HTML, zastępując znaki &, <,>, "i '.

http://underscorejs.org/#escape

Nie jest to wbudowana funkcja JavaScript, ale jeśli już używasz podkreślenia, jest to lepsza alternatywa niż pisanie własnej funkcji, jeśli twoje ciągi do konwersji nie są zbyt duże.

Jeszcze innym podejściem jest całkowite zrezygnowanie z mapowania znaków i zamiast tego przekonwertowanie wszystkich niechcianych znaków na odpowiadające im odnośniki numeryczne, np .:

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

Zwróć uwagę, że określone wyrażenie RegEx obsługuje tylko określone znaki, z których OP chciał uciec, ale w zależności od kontekstu, w którym zostanie użyty kod HTML ze ucieczką, te znaki mogą nie być wystarczające. Artykuł Ryana Grove'a Jest więcej znaków ucieczki HTML niż &, <,> i " to dobra lektura na ten temat. W zależności od kontekstu, poniższe wyrażenie regularne może być bardzo potrzebne, aby uniknąć wstrzyknięcia XSS:

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

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

próbka:

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

Prawdopodobnie nie potrzebujesz takiej funkcji. Ponieważ Twój kod znajduje się już w przeglądarce *, możesz uzyskać bezpośredni dostęp do DOM zamiast generować i kodować HTML, który będzie musiał zostać zdekodowany wstecz przez przeglądarkę, aby faktycznie był używany.

Użyj innerTextwłaściwości, aby bezpiecznie i znacznie szybciej wstawić zwykły tekst do DOM, niż przy użyciu którejkolwiek z przedstawionych funkcji ucieczki. Nawet szybciej niż przypisanie statycznego wstępnie zakodowanego ciągu doinnerHTML .

Służy classListdo edycji klas, datasetustawiania data-atrybutów isetAttribute innych.

Wszystkie te poradzą sobie z ucieczką za Ciebie. Mówiąc dokładniej, nie ma potrzeby ucieczki i żadne kodowanie nie będzie wykonywane pod spodem **, ponieważ pracujesz nad HTML, tekstową reprezentacją DOM.

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

* Ta odpowiedź nie jest przeznaczona dla użytkowników JavaScript po stronie serwera (Node.js itp. )

** Chyba że później wyraźnie przekonwertujesz go na rzeczywisty HTML. Np. Poprzez dostęp innerHTML- tak się dzieje, gdy uruchamiasz $('<div/>').text(value).html();sugerowane w innych odpowiedziach. Więc jeśli Twoim ostatecznym celem jest wstawienie pewnych danych do dokumentu, robiąc to w ten sposób, wykonasz tę pracę dwukrotnie. Możesz również zobaczyć, że w wynikowym HTML nie wszystko jest zakodowane, a jedynie minimum potrzebne do poprawności. Odbywa się to w zależności od kontekstu, dlatego ta metoda jQuery nie koduje cudzysłowów i dlatego nie powinna być używana jako eskaper ogólnego przeznaczenia. Znakowanie cudzysłowami jest potrzebne, gdy konstruujesz kod HTML jako ciąg znaków z niezaufanymi lub zawierającymi cytaty danymi w miejscu wartości atrybutu. Jeśli używasz DOM API, nie musisz w ogóle martwić się ucieczką.

W przypadku użytkowników Node.JS (lub użytkowników korzystających ze środowiska uruchomieniowego Jade w przeglądarce) można skorzystać z funkcji ucieczki Jade.

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

Nie ma sensu pisać tego samemu, jeśli ktoś inny go utrzymuje. :)

Rozwijam trochę odpowiedź okw.

Możesz użyć do tego funkcji DOM przeglądarki.

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

utils.escapeHTML('<escapeThis>&')

To wraca <escapeThis>&

Używa standardowej funkcji createElementdo stworzenia niewidocznego elementu, a następnie używa funkcji textContentdo ustawienia dowolnego ciągu jako jego zawartości, a następnie innerHTMLdo pobrania zawartości w reprezentacji HTML.

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

Mam nadzieję, że to wygra wyścig ze względu na swoje osiągi i co najważniejsze, nie jest to łańcuchowa logika używająca .replace ('&', '&'). Replace ('<', '<') ...

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

Odwrócony:

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

OWASP zaleca, aby „[e] xz wyjątkiem znaków alfanumerycznych, [powinieneś] zmienić znaczenie wszystkich znaków z wartościami ASCII mniejszymi niż 256 z&#xHH; formatem (lub nazwaną jednostką, jeśli jest dostępna), aby zapobiec wyłączeniu [an] atrybutu”.

Oto funkcja, która to robi, na przykładzie użycia:

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

W rozwiązaniu tym wykorzystuje się numeryczny kod znaków, <zastępując np <..

Chociaż jego wydajność jest nieco gorsza od rozwiązania wykorzystującego mapę , ma zalety:

• Nie zależy od biblioteki ani DOM
• Całkiem łatwe do zapamiętania (nie musisz zapamiętywać 5 znaków ucieczki HTML)
• Mały kod
• Dość szybko (nadal jest szybszy niż wymiana 5 łańcuchów)