13

Preciso de todas as entidades HTML originais de um parágrafo, principalmente os acentos, os métodos que conheço recuperam somente algumas entidades, conforme o exemplo abaixo onde ">" é codificado corretamente mas o "ç" não.

É importante que o código possa diferenciar acentos gerados ou não por entidades (como em çã) pois o conteúdo vem de uma fonte externa e pode vir sem um padrão definido

alert(document.querySelector('p').innerHTML);
<p>situa&ccedil;ão &gt; ativo</p>


Notas: conforme a resposta aceita do @mgibsonbr não é possível, a solução adotada foi utilizar a função DOMDocument::saveHTML, ela interpreta as entidades da mesma maneira que o navegador, de forma que os dados ficam iguais no servidor e no cliente.

1
  • 1
    Essa é uma ótima pergunta! Eu não sei em que momento do parsing as entidades HTML são resolvidas, nem se isso é preservado em algum lugar ou descartado. Verificando os filhos do p, vejo que há apenas um nó Text, cujo data (de CharacterData) é a string com todas as suas entidades resolvidas (inclusive o >). Sendo assim, me parece que a informação que quer não existe mais após a página ser carregada, de modo que você precisaria obter esse conteúdo dessa fonte externa (seja no lado servidor, ou talvez via ajax se aplicável) e tratá-lo antes do browser interpretar seu HTML.
    – mgibsonbr
    Commented 20/08/2015 às 20:04

2 Respostas 2

9

As entidades HTML originais não são preservadas quando o markup do documento é interpretado (parsed) pelo browser, de modo que não estão disponíveis para você consultá-las via JavaScript ou de qualquer outra maneira. Segundo a especificação, durante a etapa de tokenization (leitura do texto "cru" e produção de "peçados" - ou tokens - para subsequente análise) as entidades HTML (aqui chamadas de Character Reference) produzem um único caractere quando consumidas:

8.2.4.69 Tokenizing character references

...

O comportamento depende da identidade do próximo caractere (aquele imediatamente depois do U+0026 AMPERSAND), da seguinte forma:

...

"#" (U+0023)

Consuma o U+0023 NUMBER SIGN.

...

Consuma todos os caracteres que casam o intervalo de caracteres listados acima (dígitos hexadecimais ASCII ou dígitos ASCII).

...

Caso contrário, se o próximo caractere é um U+003B SEMICOLON, consuma-o também. Se não for, é um erro de parsing.

...

Caso contrário, retorne um token de caractere para o caractere Unicode cujo ponto de código é aquele número.

Qualquer outra coisa

Consuma o máximo número de caracteres possíveis, desde que os caracteres consumidos casem com um dos identificadores na primeira coluna da tabela de referência de caracteres nomeados (diferenciando maiúsculas e minúsculas).

...

Retorne um ou dois tokens de caracteres para o(s) caractere(s) correspondente(s) ao nome do caractere na referência (dado pela segunda coluna da tabela de referência de caracteres nomeados).

(tradução livre, ênfase minha)

Ou seja, após o documento HTML ter sido "parseado" e o HTML resultante formado (bem como sua representação no DOM) a informação sobre as entidades HTML utilizadas não estão mais lá - foram substituídas pelos seus caracteres correspondentes. O fato do innerHTML (e outerHTML) devolverem o texto com o &gt; escapado se deve ao fato dele "reescapá-lo" pra você, independentemente da forma como ele estava originalmente no markup:

alert(document.querySelector('p').innerHTML);
<p>situa&ccedil;ão > ativo</p>

Portanto, se você realmente precisa dessa informação terá de obtê-la antes do texto do documento chegar ao browser como HTML: no lado servidor, por exemplo, ou - se estiver obtendo o texto via Ajax - analisando o texto antes de criar elementos com ele. Infelizmente isso implica em analisar o texto do HTML você mesmo, o que não é nada trivial... Talvez alguma biblioteca de parsing seja capaz de ao mesmo tempo tratar das entidades (de preferência reconhecendo todas que compõem a especificação) e preservar o conteúdo original das mesmas, mas de cabeça não conheço nenhuma (nem sei que em ambiente você está trabalhando).

1
  • ótima resposta, muito obrigado! estou usando PHP no servidor, como preciso que o comprimento das strings seja igual no servidor e cliente talvez a solução seja utilizar html_entity_decode() e .textContent / .innerText Commented 21/08/2015 às 11:54
0

apenas complementando, já que o conteúdo é obtido externamente, você pode requerer ele através de uma requisição ajax

var external = document.getElementById("external");
var innerHTML = document.getElementById("innerHTML");
var responseText = document.getElementById("responseText");

var blob = new Blob(["<p>situa&ccedil;ão &gt; ativo</p>"], { type: "text/html" });
var url = URL.createObjectURL(blob);

var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange=function()
{
    if (xmlHttp.readyState==4 && xmlHttp.status==200)
    {        
        external.innerHTML = xmlHttp.responseText;
        innerHTML.value = external.innerHTML;
        responseText.value = xmlHttp.responseText;
    }
}

xmlHttp.open("GET", url, true);
xmlHttp.send("");
div {
    margin-bottom: 5px;
}

label {
    display: inline-block;
    width: 100px;
    text-align: right;
}

input {
    width: 400px;
}
<div id="external">
    
</div>
<div>
    <label for="innerHTML">innerHTML:</label>
    <input id="innerHTML" type="text" readonly />
</div>
<div>
    <label for="responseText">responseText:</label>
    <input id="responseText" type="text" readonly />
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .