HtmlSpecialChars equivalente em Javascript?

Aparentemente, isso é mais difícil de encontrar do que eu pensava. E até é tão simples ...

Existe uma função equivalente aos htmlspecialchars do PHP incorporados ao Javascript? Eu sei que é bastante fácil implementar isso você mesmo, mas usar uma função interna, se disponível, é apenas melhor.

Para aqueles que não estão familiarizados com o PHP, htmlspecialchars traduz coisas como <htmltag/>em<htmltag/>

Eu sei disso escape()e encodeURI()não funciona dessa maneira.

Há um problema com o código da solução - ele escapará apenas da primeira ocorrência de cada caractere especial. Por exemplo:

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

Aqui está o código que funciona corretamente:

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

Atualizar

O código a seguir produzirá resultados idênticos aos acima, mas ele tem um desempenho melhor, principalmente em grandes blocos de texto (obrigado jbo5112 ).

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

Isso é codificação HTML. Não há nenhuma função nativa de javascript para fazer isso, mas você pode pesquisar no Google e fazer algumas bem feitas.

Por exemplo, http://sanzon.wordpress.com/2008/05/01/neat-little-html-encoding-trick-in-javascript/

EDIT:
Isto é o que eu testei:

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

Resultado: <htmltag/>

Vale a pena ler: 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);
  };
})()

Nota : Execute isso apenas uma vez. E não o execute em cadeias já codificadas, por exemplo, &torna-se&

Com o jQuery, pode ser assim:

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

De questão relacionada Escapando seqüências de caracteres HTML com jQuery

Conforme mencionado no comentário, aspas duplas e aspas simples são deixadas como estão para esta implementação. Isso significa que esta solução não deve ser usada se você precisar criar atributo de elemento como uma string html bruta.

Aqui está uma função para escapar do HTML:

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

E para decodificar:

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

O Underscore.js fornece uma função para isso:

_.escape(string)

Escapa uma string para inserção em HTML, substituindo &, <,>, "e 'caracteres.

http://underscorejs.org/#escape

Não é uma função Javascript interna, mas se você já estiver usando o Underscore, é uma alternativa melhor do que escrever sua própria função se as seqüências de caracteres para converter não forem muito grandes.

Ainda outra abordagem é renunciar a todo o mapeamento de caracteres e converter todos os caracteres indesejados em suas respectivas referências numéricas de caracteres, por exemplo:

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

Observe que o RegEx especificado lida apenas com os caracteres específicos dos quais o OP queria escapar, mas, dependendo do contexto em que o HTML usado será usado, esses caracteres podem não ser suficientes. Artigo de Ryan Grove O escape de HTML é mais do que &, <,>, e " é uma boa leitura do tópico. E, dependendo do seu contexto, o seguinte RegEx pode muito bem ser necessário para evitar a injeção de XSS:

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

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

amostra:

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

Provavelmente, você não precisa dessa função. Como seu código já está no navegador *, você pode acessar o DOM diretamente, em vez de gerar e codificar HTML, que precisará ser decodificado para trás pelo navegador para ser realmente usado.

Use a innerTextpropriedade para inserir texto sem formatação no DOM com segurança e muito mais rápido do que usar qualquer uma das funções de escape apresentadas. Ainda mais rápido do que atribuir uma sequência pré-codificada estática parainnerHTML .

Use classListpara editar classes, datasetdefinir data-atributos esetAttribute para outros.

Todos estes irão lidar com a fuga para você. Mais precisamente, não é necessário escapar e nenhuma codificação será executada por baixo **, pois você está trabalhando em torno do HTML, a representação textual do DOM.

// use existing element
var author = 'John "Superman" Doe <[email protected]>';
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>

* Esta resposta não se destina a usuários JavaScript do servidor (Node.js, etc.) )

** A menos que você o converta explicitamente em HTML real posteriormente. Por exemplo, acessando innerHTML- é o que acontece quando você executa $('<div/>').text(value).html();sugestões em outras respostas. Portanto, se seu objetivo final é inserir alguns dados no documento, dessa maneira, você fará o trabalho duas vezes. Além disso, você pode ver que no HTML resultante nem tudo é codificado, apenas o mínimo necessário para que seja válido. Isso é feito de acordo com o contexto, é por isso que esse método jQuery não codifica aspas e, portanto, não deve ser usado como um escaper de uso geral. O escape de aspas é necessário quando você está construindo HTML como uma sequência com dados não confiáveis ​​ou contendo aspas no lugar do valor de um atributo. Se você usa a API do DOM, não precisa se preocupar em escapar.

Para usuários do Node.JS (ou usuários que utilizam o tempo de execução do Jade no navegador), você pode usar a função de escape do Jade.

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

Não faz sentido escrever você mesmo se alguém o está mantendo. :)

Estou elaborando um pouco a resposta do okw.

Você pode usar as funções DOM do navegador para isso.

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

utils.escapeHTML('<escapeThis>&')

Isso retorna <escapeThis>&

Ele usa a função padrão createElementpara criar um elemento invisível, depois usa a função textContentpara definir qualquer string como seu conteúdo e, em seguida, innerHTMLpara obter o conteúdo em sua representação 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;
 }

Espero que isso vença a corrida devido ao seu desempenho e, o mais importante, não a uma lógica encadeada usando .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>'));

Um revertido:

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

A OWASP recomenda que "[e] xcept para caracteres alfanuméricos, [você deve] escape de todos os caracteres com valores ASCII menores que 256 com o&#xHH; formato (ou uma entidade nomeada, se disponível) para impedir a desativação de um atributo [um]".

Então, aqui está uma função que faz isso, com um exemplo de uso:

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

Esta solução usa o código numérico dos caracteres, por exemplo, <é substituído por< .

Embora seu desempenho seja um pouco pior que a solução usando um mapa , ele tem as vantagens:

• Não depende de uma biblioteca ou DOM
• Muito fácil de lembrar (você não precisa memorizar os 5 caracteres de escape HTML)
• Pouco código
• Razoavelmente rápido (ainda é mais rápido que 5 substituições em cadeia)