教程 · Google 文档 → HTML

从 Google 文档里弄出干净的 HTML

从文档里复制几段,粘到 CMS 里,文字外面裹着 c1、c17 这样的 class 名,而它们指向的样式表你手上没有。

那段标记里有三处具体的毛病。知道是哪三处之后,粘一次就修好了。

去转换器

复制内容,不是复制链接

这是最先把人绕住的一步:从文档菜单里「下载 → 网页」,给你的是一个 zip,里面是一份完整的 HTML 文档加一份内嵌样式表 —— 整页连样式一起。

你要的是剪贴板。在文档里选中内容复制,剪贴板上会放一份富文本 HTML,那一份带着结构而不带样式表。

  1. 01打开文档,选中你要的内容。要全部的话 Ctrl+A。
  2. 02用 Ctrl+C 复制 —— 不是「复制链接」,那个只给你一个指向文档的网址。
  3. 03粘到转换器页面的框里,或者在那一页任何地方按 Ctrl+V。不用登录,不涉及任何云端硬盘权限;你的浏览器交出的只有剪贴板,别的什么都没有。

毛病一:那堆 class

Google 的剪贴板 HTML 几乎给每个元素都挂了 class —— c0、c1、c17,列表项上还有 lst-kix_ 开头的。它们是按每份文档生成的,指向的 CSS 留在文档那边。

所以它们不只是噪音,而是死引用:在你的页面上什么都不做,会跟你自己的 class 名撞车,还让这段标记在你要改的时候没法读。

清理是按模式来的 —— c 加数字、lst-kix_ 开头的任何东西、docs-internal-guid 的 id。你自己的 class 如果混在里面,不动。

从文档粘过来
<p class="c3"><span class="c1">A sentence.</span></p>
清理之后
<p>A sentence.</p>

毛病二:不加粗的加粗外壳

文档会把复制的内容裹进一个 <b style="font-weight:normal">。这是个明确关掉了加粗的 <b> 标签 —— 编辑器内部记录格式的方式导致的怪东西。

把它粘到任何会剥掉 style 属性的地方(大多数 CMS 都会),整块就变粗了。这儿的做法是把这个标签拆掉而不是留着,于是内容出来的嵌套层级就是它本来该有的那个。

同一遍还会删掉 class 名清掉之后剩下的空 <span>。就是它们让两段文字粘出来有十二行。

毛病三:每个链接都是跳转

文档里的链接出来指向的是 google.com/url?q=https://example.com/…,而不是目标地址。Google 拿它在编辑器里统计点击。

发到页面上,意思就是你站上每一条外链都绕一趟 Google、状态栏里显示的网址是错的,而且那个跳转器哪天变了链接就全断。

这层外壳会被拆回真正的目标地址,嵌套了几层就拆几层。跟踪参数也一起走 —— utm_source 那一家子、gclid、fbclid,还有另外几个。

从文档粘过来
<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>

剩下的,和还得你自己动手的

标题、段落、列表、表格、链接、粗体斜体 —— 换句话说,那份文档。脚本、事件处理器、行内样式都没了,因为剪贴板 HTML 可能来自网上任何一页,一律当不可信输入处理。

有两件事清理器留给你。Google 那些空占位段落会以 <p></p> 的形式过来,不要的自己删。还有文档里的图片存在 Google 服务器上,网址是会过期的 —— 下载下来自己托管,不然过些日子它们会从你的页面上消失。

选中、复制、粘贴。剪贴板在你的浏览器里读,什么都不往外发。

Google Docs → HTML