javascript - parse - Escapando strings HTML com jQuery




jquery parse html to string (16)

Após os últimos testes, posso recomendar a solução JavaScript javaScript (DOM) mais rápida e completamente compatível com navegador :

function HTMLescape(html){
    return document.createElement('div')
        .appendChild(document.createTextNode(html))
        .parentNode
        .innerHTML
}

Se você repeti-lo muitas vezes, você pode fazer isso com variáveis ​​preparadas uma vez:

//prepare variables
var DOMtext = document.createTextNode("test");
var DOMnative = document.createElement("span");
DOMnative.appendChild(DOMtext);

//main work for each case
function HTMLescape(html){
  DOMtext.nodeValue = html;
  return DOMnative.innerHTML
}

Veja minha comparison desempenho final ( questão da pilha ).

Alguém sabe de uma maneira fácil de escapar HTML de seqüências de caracteres no jQuery ? Eu preciso ser capaz de passar uma seqüência arbitrária e ter escapado adequadamente para exibição em uma página HTML (impedindo ataques de injeção de JavaScript / HTML). Tenho certeza de que é possível estender o jQuery para fazer isso, mas não sei o suficiente sobre o framework no momento para realizar isso.


Aqui está uma função JavaScript limpa e clara. Ele irá escapar texto como "alguns <muitos" em "alguns & lt; muitos".

function escapeHtmlEntities (str) {
  if (typeof jQuery !== 'undefined') {
    // Create an empty div to use as a container,
    // then put the raw text in and get the HTML
    // equivalent out.
    return jQuery('<div/>').text(str).html();
  }

  // No jQuery, so use string replace.
  return str
    .replace(/&/g, '&amp;')
    .replace(/>/g, '&gt;')
    .replace(/</g, '&lt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&apos;');
}

Eu escapeHTML() o exemplo do moustache.js adicionando o método escapeHTML() ao objeto string.

var __entityMap = {
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
};

String.prototype.escapeHTML = function() {
    return String(this).replace(/[&<>"'\/]/g, function (s) {
        return __entityMap[s];
    });
}

Dessa forma, é muito fácil usar "Some <text>, more Text&Text".escapeHTML()


Eu escrevi uma pequena função que faz isso. Só escapa " , & , < e > (mas geralmente é tudo o que você precisa). É um pouco mais elegante do que as soluções propostas anteriormente, pois usa apenas um .replace() para fazer toda a conversão. ( EDIT 2: Reduzida complexidade de código, tornando a função ainda menor e mais simples, se você estiver curioso sobre o código original, veja o final desta resposta.)

function escapeHtml(text) {
    'use strict';
    return text.replace(/[\"&<>]/g, function (a) {
        return { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' }[a];
    });
}

Este é um JavaScript simples, não é usado o jQuery.

Escapando / e ' também

Edite em resposta ao comentário do mklement .

A função acima pode ser facilmente expandida para incluir qualquer caractere. Para especificar mais caracteres para escapar, basta inseri-los na classe de caracteres na expressão regular (ou seja, dentro de /[...]/g ) e como uma entrada no objeto chr . ( EDIT 2: Encurtou esta função também, da mesma forma.)

function escapeHtml(text) {
    'use strict';
    return text.replace(/[\"&'\/<>]/g, function (a) {
        return {
            '"': '&quot;', '&': '&amp;', "'": '&#39;',
            '/': '&#47;',  '<': '&lt;',  '>': '&gt;'
        }[a];
    });
}

Observe o uso acima de &#39; para apóstrofo (a entidade simbólica "pode ​​ter sido usada em vez disso - é definida em XML, mas originalmente não foi incluída na especificação HTML e, portanto, pode não ser suportada por todos os navegadores. Consulte: Artigo da Wikipédia sobre codificações de caracteres HTML ). Também lembro de ter lido em algum lugar que usar entidades decimais é mais amplamente suportado do que usar hexadecimal, mas não consigo encontrar a origem para isso agora. (E não pode haver muitos navegadores por aí que não suportem as entidades hexadecimais.)

Nota: Adicionar / e ' à lista de caracteres de escape não é tão útil, pois eles não têm nenhum significado especial em HTML e não precisam ser escapados.

Função escapeHtml Original

EDIT 2: A função original usou uma variável ( chr ) para armazenar o objeto necessário para o retorno de chamada .replace() . Essa variável também precisava de uma função extra anônima para ampliá-la, tornando a função (desnecessariamente) um pouco maior e mais complexa.

var escapeHtml = (function () {
    'use strict';
    var chr = { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' };
    return function (text) {
        return text.replace(/[\"&<>]/g, function (a) { return chr[a]; });
    };
}());

Eu não testei quais das duas versões são mais rápidas. Se fizer isso, sinta-se à vontade para adicionar informações e links sobre isso aqui.


Exemplo de escape JavaScript simples:

function escapeHtml(text) {
    var div = document.createElement('div');
    div.innerText = text;
    return div.innerHTML;
}

escapeHtml("<script>alert('hi!');</script>")
// "&lt;script&gt;alert('hi!');&lt;/script&gt;"

Fácil o suficiente para usar o sublinhado:

_.escape(string) 

Sublinhado é uma biblioteca de utilitários que fornece muitos recursos que o js nativo não fornece. Há também o lodash que é a mesma API do sublinhado, mas foi reescrito para ter mais desempenho.


Se você está escapando por HTML, há apenas três que eu posso pensar que seria realmente necessário:

html.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");

Dependendo do seu caso de uso, você também pode precisar fazer coisas como " para &quot; . Se a lista fosse grande o suficiente, eu usaria apenas uma matriz:

var escaped = html;
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g, "&gt;"], [/"/g, "&quot;"]]
for(var item in findReplace)
    escaped = escaped.replace(findReplace[item][0], findReplace[item][1]);

encodeURIComponent() só irá escapar para URLs, não para HTML.


Se você está indo a rota regex, há um erro no exemplo do tghw acima.

<!-- WON'T WORK -  item[0] is an index, not an item -->

var escaped = html; 
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g,"&gt;"], [/"/g,
"&quot;"]]

for(var item in findReplace) {
     escaped = escaped.replace(item[0], item[1]);   
}


<!-- WORKS - findReplace[item[]] correctly references contents -->

var escaped = html;
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g, "&gt;"], [/"/g, "&quot;"]]

for(var item in findReplace) {
     escaped = escaped.replace(findReplace[item[0]], findReplace[item[1]]);
}

Se você tiver underscore.js, use _.escape (mais eficiente que o método jQuery postado acima):

_.escape('Curly, Larry & Moe'); // returns: Curly, Larry &amp; Moe

Tente Underscore.string lib, ele funciona com o jQuery.

_.str.escapeHTML('<div>Blah blah blah</div>')

saída:

'&lt;div&gt;Blah blah blah&lt;/div&gt;'

Você pode facilmente fazê-lo com baunilha js.

Basta adicionar um nó de texto ao documento. Será escapado pelo navegador.

var escaped = document.createTextNode("<HTML TO/ESCAPE/>")
document.getElementById("[PARENT_NODE]").appendChild(escaped)

escape() e unescape() são destinados a codificar / decodificar strings para URLs, não HTML.

Na verdade, eu uso o seguinte trecho para fazer o truque que não requer nenhum framework:

var escapedHtml = html.replace(/&/g, '&amp;')
                      .replace(/>/g, '&gt;')
                      .replace(/</g, '&lt;')
                      .replace(/"/g, '&quot;')
                      .replace(/'/g, '&apos;');

Como você está usando o jQuery , basta definir a propriedade de text do elemento:

// before:
// <div class="someClass">text</div>
var someHtmlString = "<script>alert('hi!');</script>";

// set a DIV's text:
$("div.someClass").text(someHtmlString);
// after: 
// <div class="someClass">&lt;script&gt;alert('hi!');&lt;/script&gt;</div>

// get the text in a string:
var escaped = $("<div>").text(someHtmlString).html();
// value: 
// &lt;script&gt;alert('hi!');&lt;/script&gt;

Esta resposta fornece os métodos jQuery e JS normal, mas isso é mais curto sem usar o DOM:

unescape(escape("It's > 20% less complicated this way."))

Cadeia de escape: It%27s%20%3E%2020%25%20less%20complicated%20this%20way.

Se os espaços de escape te incomodarem, tente:

unescape(escape("It's > 20% less complicated this way.").replace(/%20/g, " "))

Escaped string: It%27s %3E 20%25 less complicated this way.

Infelizmente, a função escape() foi preterida na versão 1.5 do JavaScript . encodeURI() ou encodeURIComponent() são alternativas, mas eles ignoram ' , então a última linha de código se transformaria em:

decodeURI(encodeURI("It's > 20% less complicated this way.").replace(/%20/g, " ").replace("'", '%27'))

Todos os principais navegadores ainda suportam o código curto, e dado o número de sites antigos, duvido que isso mude em breve.


function htmlEscape(str) {
    var stringval="";
    $.each(str, function (i, element) {
        alert(element);
        stringval += element
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(' ', '-')
            .replace('?', '-')
            .replace(':', '-')
            .replace('|', '-')
            .replace('.', '-');
    });
    alert(stringval);
    return String(stringval);
}





escaping