Decodificar & amp; voltar para & em JavaScript

229

Eu tenho cordas como

var str = 'One &amp; two &amp; three';

renderizado em HTML pelo servidor da web. Eu preciso transformar essas cordas em

'One & two & three'

Atualmente, é isso que estou fazendo (com a ajuda do jQuery):

$(document.createElement('div')).html('{{ driver.person.name }}').text()

No entanto, tenho uma sensação perturbadora de que estou fazendo errado. eu tentei

unescape("&amp;")

mas parece que não funciona, nem decodeURI / decodeURIComponent.

Existem outras maneiras mais nativas e elegantes de fazer isso?

— Arte
fonte

A enorme função incluída neste artigo parece funcionar bem: blogs.msdn.com/b/aoakley/archive/2003/11/12/49645.aspx Não acho que seja a solução mais inteligente, mas funcione.

— Matias

1

Como cadeias de caracteres que contêm entidades HTML são algo diferente de cadeias de caracteres escape d ou URI , essas funções não funcionam.

— Marcel Korpel

1

@ Matias note que novas entidades nomeadas foram adicionadas ao HTML (por exemplo, através da especificação do HTML 5) desde que a função foi criada em 2003 - por exemplo, ela não reconhece &zopf;. Este é um problema com uma especificação em evolução; como tal, você deve escolher uma ferramenta que está sendo mantida para resolvê-la.

— Mark Amery

1

@MarkAmery sim, concordo totalmente! É uma boa experiência voltar a essas perguntas depois de alguns anos, obrigado!

— Matias

104

Uma opção mais moderna para interpretar HTML (texto e outros) do JavaScript é o suporte HTML na DOMParserAPI ( veja aqui no MDN ). Isso permite que você use o analisador HTML nativo do navegador para converter uma string em um documento HTML. É suportado em novas versões de todos os principais navegadores desde o final de 2014.

Se quisermos apenas decodificar algum conteúdo de texto, podemos colocá-lo como o único conteúdo no corpo de um documento, analisá-lo e retirá-lo .body.textContent.

var encodedStr = 'hello &amp; world';

var parser = new DOMParser;
var dom = parser.parseFromString(
    '<!doctype html><body>' + encodedStr,
    'text/html');
var decodedString = dom.body.textContent;

console.log(decodedString);

Expandir snippet

Podemos ver no rascunho da especificaçãoDOMParser que o JavaScript não está ativado para o documento analisado, para que possamos realizar essa conversão de texto sem preocupações de segurança.

O parseFromString(str, type)método deve executar estas etapas, dependendo do tipo :

"text/html"

Analise str com um HTML parsere retorne o recém-criado Document.

O sinalizador de script deve ser definido como "desativado".

NOTA
scriptelementos são marcados como não executáveis e o conteúdo de noscripté analisado como marcação.

Está além do escopo desta pergunta, mas observe que, se você estiver pegando os nós DOM analisados (não apenas o conteúdo de texto) e os movendo para o documento ao vivo DOM, é possível que seus scripts sejam reativados, e pode haver preocupações de segurança. Eu não pesquisei, então tenha cuidado.

— Jeremy Banks
fonte

5

alguma alternativa para os NodeJs?

— CodificadorInrRain

284

Você precisa decodificar todas as entidades HTML codificadas ou apenas &ela mesma?

Se você precisar apenas lidar com &isso, poderá fazer o seguinte:

var decoded = encoded.replace(/&amp;/g, '&');

Se você precisar decodificar todas as entidades HTML, poderá fazê-lo sem o jQuery:

var elem = document.createElement('textarea');
elem.innerHTML = encoded;
var decoded = elem.value;

Observe os comentários de Mark abaixo, que destacam as brechas de segurança em uma versão anterior desta resposta e recomenda o uso, em textareavez de divatenuar as possíveis vulnerabilidades do XSS. Essas vulnerabilidades existem se você usa jQuery ou JavaScript simples.

— LukeH
fonte

16

Cuidado! Isso é potencialmente inseguro. Se encoded='<img src="bla" onerror="alert(1)">'o snippet acima mostrará um alerta. Isso significa que, se o texto codificado for proveniente da entrada do usuário, decodificá-lo com esse trecho pode apresentar uma vulnerabilidade XSS.

— Mark Amery

@MarkAmery não eu um especialista em segurança, mas parece que se você conjunto imediato a div para nulldepois de receber o texto, o alerta na img não é acionado - jsfiddle.net/Mottie/gaBeb/128

— Mottie

4

@Ottie, verifique se o navegador funcionou para você, mas alert(1)ainda é acionado por mim no Chrome no OS X. Se você quiser uma variante segura desse hack, tente usar umtextarea .

— Mark Amery

+1 para a regexp simples substitui a alternativa por apenas um tipo de entidade html. Use isso se você espera que os dados html sejam interpolados de, por exemplo, um aplicativo de frasco python para um modelo.

— OzzyTheGiant #

Como fazer isso no servidor Node?

— Mohammad Kermani

44

Matthias Bynens tem uma biblioteca para isso: https://github.com/mathiasbynens/he

Exemplo:

console.log(
    he.decode("J&#246;rg &amp J&#xFC;rgen rocked to &amp; fro ")
);
// Logs "Jörg & Jürgen rocked to & fro"

Sugiro favorecê-lo em relação a hacks que envolvem a configuração do conteúdo HTML de um elemento e a leitura do conteúdo do texto. Tais abordagens podem funcionar, mas são enganosamente perigosas e apresentam oportunidades de XSS se usadas em entradas não confiáveis do usuário.

Se você realmente não consegue carregar uma biblioteca, pode usar o textareahack descrito nesta resposta para uma pergunta quase duplicada, que, diferentemente de várias abordagens semelhantes sugeridas, não possui falhas de segurança que eu conheço:

function decodeEntities(encodedString) {
    var textArea = document.createElement('textarea');
    textArea.innerHTML = encodedString;
    return textArea.value;
}

console.log(decodeEntities('1 &amp; 2')); // '1 & 2'

Mas tome nota dos problemas de segurança, afetando abordagens semelhantes a essa, listadas na resposta vinculada! Essa abordagem é um hack, e futuras alterações no conteúdo permitido de um textarea(ou bugs em navegadores específicos) podem levar ao código que depende repentinamente de um furo no XSS um dia.

— Mark Amery
fonte

A biblioteca de Matthias Bynens heé absolutamente ótima! Muito obrigado pela recomendação!

— Pedro A

23

var htmlEnDeCode = (function() {
    var charToEntityRegex,
        entityToCharRegex,
        charToEntity,
        entityToChar;

    function resetCharacterEntities() {
        charToEntity = {};
        entityToChar = {};
        // add the default set
        addCharacterEntities({
            '&amp;'     :   '&',
            '&gt;'      :   '>',
            '&lt;'      :   '<',
            '&quot;'    :   '"',
            '&#39;'     :   "'"
        });
    }

    function addCharacterEntities(newEntities) {
        var charKeys = [],
            entityKeys = [],
            key, echar;
        for (key in newEntities) {
            echar = newEntities[key];
            entityToChar[key] = echar;
            charToEntity[echar] = key;
            charKeys.push(echar);
            entityKeys.push(key);
        }
        charToEntityRegex = new RegExp('(' + charKeys.join('|') + ')', 'g');
        entityToCharRegex = new RegExp('(' + entityKeys.join('|') + '|&#[0-9]{1,5};' + ')', 'g');
    }

    function htmlEncode(value){
        var htmlEncodeReplaceFn = function(match, capture) {
            return charToEntity[capture];
        };

        return (!value) ? value : String(value).replace(charToEntityRegex, htmlEncodeReplaceFn);
    }

    function htmlDecode(value) {
        var htmlDecodeReplaceFn = function(match, capture) {
            return (capture in entityToChar) ? entityToChar[capture] : String.fromCharCode(parseInt(capture.substr(2), 10));
        };

        return (!value) ? value : String(value).replace(entityToCharRegex, htmlDecodeReplaceFn);
    }

    resetCharacterEntities();

    return {
        htmlEncode: htmlEncode,
        htmlDecode: htmlDecode
    };
})();

Isto é do código fonte ExtJS.

— WaiKit Kung
fonte

4

-1; isso falha ao lidar com a grande maioria das entidades nomeadas. Por exemplo, htmlEnDecode.htmlDecode('€')deve retornar '€', mas retorna '€'.

— Mark Amery

17

element.innerText também faz o truque.

— avg_joe
fonte

15

Você pode usar a função de desbloqueio / escape do Lodash https://lodash.com/docs/4.17.5#unescape

import unescape from 'lodash/unescape';

const str = unescape('fred, barney, &amp; pebbles');

str se tornará 'fred, barney, & pebbles'

— Eu sou eu
fonte

1

provavelmente é melhor fazer "importar _unescape de 'lodash / unescape';" por isso não entre em conflito com a função javascript obsoleto com o mesmo nome: unescape

— Rick Penabella

14

Caso você esteja procurando, como eu - enquanto isso, há um método JQuery agradável e seguro.

https://api.jquery.com/jquery.parsehtml/

Você pode f.ex. digite isso no seu console:

var x = "test &amp;";
> undefined
$.parseHTML(x)[0].textContent
> "test &"

Portanto, $ .parseHTML (x) retorna uma matriz e, se você tiver uma marcação HTML em seu texto, o array.length será maior que 1.

— cslotty
fonte

Funcionou perfeitamente para mim, era exatamente isso que eu estava procurando, obrigado.

— Jonathan Nielsen

1

Se xtiver um valor <script>alert('hello');</script>acima, irá falhar. No jQuery atual, na verdade, ele não tenta executar o script, mas [0]produz undefinedcomo resultado a chamada para textContentfalhará e seu script será interrompido por aí. $('<div />').html(x).text();parece mais seguro - via gist.github.com/jmblog/3222899

— Andrew Hodgkinson

@AndrewHodgkinson sim, mas a pergunta era "Decodificar de volta para & em JavaScript" - para testar primeiro o conteúdo de x ou garantir que você o use apenas nos casos corretos.

— cslotty

Realmente não vejo como isso se segue. O código acima funciona em todos os casos. E como exatamente você "asseguraria" o valor de x necessário consertar? E se o exemplo de script acima alertou '& amp;' para que realmente precisasse de correção? Não temos ideia de onde vêm as sequências do OP, portanto, é necessário considerar as entradas maliciosas.

— Andrew Hodgkinson

@AndrewHodgkinson Gosto da sua consideração, mas essa não é a questão aqui. Sinta-se livre para responder a essa pergunta, no entanto. Eu acho que você pode remover tags de script, f.ex.

— cslotty

8

O jQuery irá codificar e decodificar para você. No entanto, você precisa usar uma tag de área de texto, não uma div.

var str1 = 'One & two & three';
var str2 = "One &amp; two &amp; three";
  
$(document).ready(function() {
   $("#encoded").text(htmlEncode(str1)); 
   $("#decoded").text(htmlDecode(str2));
});

function htmlDecode(value) {
  return $("<textarea/>").html(value).text();
}

function htmlEncode(value) {
  return $('<textarea/>').text(value).html();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="encoded"></div>
<div id="decoded"></div>

Expandir snippet

— Jason Williams
fonte

2

-1 porque há uma (surpreendente) falha de segurança nas versões antigas do jQuery, algumas das quais provavelmente ainda possuem uma base de usuários significativa - essas versões detectam e avaliam explicitamente os scripts no HTML passado para .html(). Assim, mesmo usando um textareanão é suficiente para garantir a segurança aqui; Sugiro não usar o jQuery para esta tarefa e escrever código equivalente com a API simples do DOM . (Sim, que o comportamento de idade por jQuery é louco e terrível.)

— Mark Amery

Obrigado por apontar isso. No entanto, a pergunta não inclui um requisito para verificar a injeção de script. A pergunta pergunta especificamente sobre o html renderizado pelo servidor da web. O conteúdo html salvo em um servidor web provavelmente deve ser validado para injeção de script antes de salvar.

— 21817 Jason Williams

4

Primeiro crie um <span id="decodeIt" style="display:none;"></span>lugar no corpo

Em seguida, atribua a string a ser decodificada como innerHTML para isso:

document.getElementById("decodeIt").innerHTML=stringtodecode

Finalmente,

stringtodecode=document.getElementById("decodeIt").innerText

Aqui está o código geral:

var stringtodecode="<B>Hello</B> world<br>";
document.getElementById("decodeIt").innerHTML=stringtodecode;
stringtodecode=document.getElementById("decodeIt").innerText

— Infoglaze.com
fonte

1

-1; isso é perigosamente inseguro para uso em entradas não confiáveis. Por exemplo, considere o que acontece se stringtodecodecontiver algo parecido <script>alert(1)</script>.

— Mark Amery

2

uma solução javascript que captura os comuns:

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

este é o inverso de https://stackoverflow.com/a/4835406/2738039

— Peter Brandt
fonte

Se você usar map[c] || ''os não reconhecidos, não serão mostrados comoundefined

— #

Cobertura muito limitada; -1.

— Mark Amery

2

+1, mais é

unescapeHtml(str){     var map = {amp: '&', lt: '<', le: '≤', gt: '>', ge: '≥', quot: '"', '#039': "'"}     return str.replace(/&([^;]+);/g, (m, c) => map[c]|| '')   }

— Trần Quốc Hoài new 2015

Cobertura manual. Não recomendado.

— Sergio A.

2

Para caras de uma linha:

const htmlDecode = innerHTML => Object.assign(document.createElement('textarea'), {innerHTML}).value;

console.log(htmlDecode('Complicated - Dimitri Vegas &amp; Like Mike'));

— Ninh Pham
fonte

2

A questão não especifica a origem de, xmas faz sentido defender, se pudermos, contra entradas maliciosas (ou simplesmente inesperadas, de nosso próprio aplicativo). Por exemplo, suponhax tenha um valor de & <script>alert('hello');</script>. Uma maneira simples e segura de lidar com isso no jQuery é:

var x    = "&amp; <script>alert('hello');</script>";
var safe = $('<div />').html(x).text();

// => "& alert('hello');"

Encontrado via https://gist.github.com/jmblog/3222899 . Não vejo muitos motivos para evitar o uso dessa solução, pois ela é pelo menos tão curta, se não menor, do que algumas alternativas e fornece defesa contra o XSS.

(Eu originalmente postei isso como um comentário, mas estou adicionando-o como uma resposta, pois um comentário subsequente no mesmo segmento solicitou que eu o fizesse).

— Andrew Hodgkinson
fonte

1

Eu tentei de tudo para remover e de uma matriz JSON. Nenhum dos exemplos acima, mas https://stackoverflow.com/users/2030321/chris deu uma ótima solução que me levou a corrigir meu problema.

var stringtodecode="<B>Hello</B> world<br>";
document.getElementById("decodeIt").innerHTML=stringtodecode;
stringtodecode=document.getElementById("decodeIt").innerText

Eu não usei, porque não entendi como inseri-lo em uma janela modal que estava puxando dados JSON em uma matriz, mas tentei isso com base no exemplo e funcionou:

var modal = document.getElementById('demodal');
$('#ampersandcontent').text(replaceAll(data[0],"&amp;", "&"));

Gosto porque era simples e funciona, mas não sei por que não é amplamente utilizado. Pesquisei oi e baixo para encontrar uma solução simples. Continuo buscando a compreensão da sintaxe e se há algum risco em usá-la. Ainda não encontrei nada.

— Digexart
fonte

Sua primeira proposta é um pouco complicada, mas funciona bem sem muito esforço. O segundo, por outro lado, usa apenas força bruta para decodificar caracteres; isso significa que pode levar muito esforço e tempo para realizar uma função completa de decodificação. É por isso que ninguém está usando essa maneira de resolver o problema do OP.

— Sergio A.