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.
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.
- 01Abra o documento e selecione o conteúdo que você quer. Ctrl+A se quiser tudo.
- 02Copie com Ctrl+C — não com «Copiar link», que só dá uma URL para o documento.
- 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.
<p class="c3"><span class="c1">A sentence.</span></p><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.
<a href="https://www.google.com/url?q=https://example.com/a%3Futm_source%3Ddoc">link</a><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