Guía · Google Docs → HTML
Sacar HTML limpio de un documento de Google
Copias unos párrafos de un documento, los pegas en un CMS, y te sale texto envuelto en nombres de clase como c1 y c17 que apuntan a una hoja de estilos que no tienes.
Ese marcado tiene tres problemas concretos. Una vez sabes cuáles son, la solución es un pegado.
Copia el contenido, no el enlace
Esto es lo primero que descoloca a la gente: Descargar → Página web desde el menú del documento te da un zip con un documento HTML completo y una hoja de estilos incrustada — la página entera, estilos incluidos.
Lo que quieres es el portapapeles. Al seleccionar contenido en un documento y copiarlo se coloca ahí una versión HTML con formato, y esa versión lleva la estructura sin la hoja de estilos.
- 01Abre el documento y selecciona el contenido que quieras. Ctrl+A si quieres todo.
- 02Copia con Ctrl+C, no con «Copiar vínculo», que solo te da una URL al documento.
- 03Pega en el cuadro de la página del conversor, o pulsa Ctrl+V en cualquier parte de esa página. No hay inicio de sesión ni permiso de Drive de por medio; tu navegador entrega el portapapeles, nada más.
Problema uno: la sopa de clases
El HTML del portapapeles de Google pone una clase en casi cada elemento — c0, c1, c17, y nombres lst-kix_ en los elementos de lista. Se generan por documento y se refieren a un CSS que se queda dentro del documento.
Así que no son solo ruido. Son referencias muertas: no hacen nada en tu página, chocan con nombres de clase tuyos, y vuelven el marcado ilegible cuando vas a editarlo.
Se quitan por patrón: c seguida de dígitos, cualquier cosa que empiece por lst-kix_, los ids docs-internal-guid. Las clases tuyas que estén en el pegado se dejan en paz.
<p class="c3"><span class="c1">A sentence.</span></p><p>A sentence.</p>Problema dos: el envoltorio de negrita que no es negrita
Docs envuelve el contenido copiado en un <b style="font-weight:normal">. Es una etiqueta <b> que apaga la negrita explícitamente, una peculiaridad de cómo el editor lleva el formato por dentro.
Pega eso en cualquier sitio donde se quite el atributo style, que es la mayoría de los CMS, y el bloque entero se pone en negrita. Aquí la etiqueta se desenvuelve en lugar de conservarse, así que el contenido sale al nivel de anidamiento que debía haber tenido desde el principio.
La misma pasada elimina los <span> vacíos que quedan cuando sus nombres de clase desaparecen. Son los que convierten un pegado de dos párrafos en doce líneas.
Problema tres: todos los enlaces son redirecciones
Los enlaces de un documento salen apuntando a google.com/url?q=https://example.com/… en lugar de al destino. Google lo usa para contar clics dentro del editor.
Publicado en una página, eso significa que cada enlace externo de tu sitio pasa por Google, muestra la URL equivocada en la barra de estado, y se rompe el día que ese redirector cambie.
El envoltorio se deshace hasta el destino real, repetidamente si está anidado. Los parámetros de seguimiento también se van: utm_source y compañía, gclid, fbclid, y unos cuantos más.
<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>Qué queda, y qué sigue siendo tu trabajo
Encabezados, párrafos, listas, tablas, enlaces, negrita y cursiva — el documento, en otras palabras. Los scripts, los manejadores de eventos y los estilos en línea desaparecen, porque el HTML del portapapeles puede venir de cualquier página de la web y se trata como entrada no confiable.
Dos cosas que el limpiador te deja a ti. Los párrafos vacíos de separación de Google llegan como <p></p>, así que borra los que no quieras. Y las imágenes de Docs están alojadas en servidores de Google con URLs que caducan: descárgalas y alójalas tú, o desaparecerán de tu página más adelante.
Selecciona, copia, pega. El portapapeles se lee en tu navegador y no se envía nada a ninguna parte.
Google Docs → HTML