Guia · Google Docs → HTML

Tirando HTML limpo de um documento do Google

Você copia uns parágrafos de um documento, cola num CMS, e recebe texto embrulhado em nomes de classe como c1 e c17 que apontam para uma folha de estilos que você não tem.

Esse markup tem três problemas específicos. Depois de saber quais são, a correção é uma colagem.

Abrir o conversor

Copie o conteúdo, não o link

É isto que pega as pessoas primeiro: Fazer download → Página da Web no menu do documento dá um zip com um documento HTML completo e uma folha de estilos embutida — a página inteira, estilos e tudo.

O que você quer é a área de transferência. Selecionar conteúdo num documento e copiar coloca ali uma versão HTML com formatação, e essa versão leva a estrutura sem a folha de estilos.

  1. 01Abra o documento e selecione o conteúdo que você quer. Ctrl+A se quiser tudo.
  2. 02Copie com Ctrl+C — não com «Copiar link», que só dá uma URL para o documento.
  3. 03Cole na caixa da página do conversor, ou aperte Ctrl+V em qualquer lugar daquela página. Não há login nem permissão do Drive envolvida; o seu navegador entrega a área de transferência, e nada mais.

Problema um: a sopa de classes

O HTML da área de transferência do Google põe uma classe em quase todo elemento — c0, c1, c17, e nomes lst-kix_ nos itens de lista. São gerados por documento e se referem a um CSS que fica para trás no documento.

Então não são só ruído. São referências mortas: não fazem nada na sua página, colidem com nomes de classe seus, e deixam o markup ilegível quando você vai editar.

São removidos por padrão: c seguido de dígitos, qualquer coisa que comece com lst-kix_, os ids docs-internal-guid. Classes suas que estejam na colagem ficam intactas.

Colado do Docs
<p class="c3"><span class="c1">A sentence.</span></p>
Depois da limpeza
<p>A sentence.</p>

Problema dois: o invólucro de negrito que não é negrito

O Docs embrulha o conteúdo copiado num <b style="font-weight:normal">. É uma tag <b> que desliga o negrito explicitamente — uma peculiaridade de como o editor controla a formatação por dentro.

Cole isso em qualquer lugar onde o atributo style seja removido, que é a maioria dos CMSs, e o bloco inteiro fica em negrito. Aqui a tag é desembrulhada em vez de mantida, então o conteúdo sai no nível de aninhamento em que ele devia estar desde o começo.

A mesma passada remove os <span> vazios que sobram depois que os nomes de classe saem. São eles que fazem uma colagem de dois parágrafos ter doze linhas.

Problema três: todo link é um redirecionamento

Os links de um documento saem apontando para google.com/url?q=https://example.com/… em vez de para o destino. O Google usa isso para contar cliques dentro do editor.

Publicado numa página, isso quer dizer que todo link externo do seu site passa pelo Google, mostra a URL errada na barra de status, e quebra no dia em que aquele redirecionador mudar.

O invólucro é desfeito de volta até o destino real, repetidamente se estiver aninhado. Parâmetros de rastreamento vão também — utm_source e companhia, gclid, fbclid, e mais alguns.

Colado do Docs
<a href="https://www.google.com/url?q=https://example.com/a%3Futm_source%3Ddoc">link</a>
Depois da limpeza
<a href="https://example.com/a">link</a>

O que fica, e o que continua sendo com você

Títulos, parágrafos, listas, tabelas, links, negrito e itálico — o documento, em outras palavras. Scripts, manipuladores de eventos e estilos inline vão embora, porque HTML de área de transferência pode vir de qualquer página da web e é tratado como entrada não confiável.

Duas coisas que o limpador deixa para você. Os parágrafos vazios de espaçamento do Google chegam como <p></p>, então apague os que não quiser. E as imagens do Docs ficam em servidores do Google com URLs que expiram — baixe e hospede você mesmo, ou elas vão desaparecer da sua página mais adiante.

Selecione, copie, cole. A área de transferência é lida no seu navegador e nada é enviado a lugar nenhum.

Google Docs → HTML