HTML转Markdown转换器

把网页源码粘进来，本页按标签逐块改写成标记文本：标题变井号、加粗变双星号、列表变短横线、代码块变围栏。解析全部在浏览器里完成，源码不上传服务器。

转换口径：块级元素之间用一个空行分隔；行内标签按顺序拼进同一行；文本里的星号与下划线会自动加反斜杠转义，避免被当成强调语法。

使用方法

HTML转Markdown转换器是「粘贴、选风格、点转换」三步：

  1. 把需要转换的源码粘进左侧输入框。页面默认已经放好一段演示源码，包含二级标题、段落、无序列表、引用和代码块，直接点按钮就能看到结果。
  2. 「标题风格」选 ATX（井号）或 Setext（下划线）。写文档站一般用 ATX；要投稿到只认 Setext 的平台就换成下划线。
  3. 「列表符号」选短横线、星号或加号，「强调符号」选星号或下划线，「代码块」选三反引号围栏或缩进四空格。四项都只影响输出写法，不影响内容。
  4. 点「开始转换」，或在输入框里按 Ctrl（Mac 用 Command）+ Enter。右侧立刻出标记文本，下面六张卡片给出长度、行数、块数与链接数。
  5. 点「复制结果」整段拿走；下方对照表默认 12 行，「加载更多」补到 16 行，可导出 CSV、JSON 或复制 TSV，用来核对标签映射。

HTML转Markdown转换器能解决什么

它解决的是「旧内容躺在 HTML 里、新站点只吃标记文本」这个迁移问题，常见四类场景：

  • 博客与文档迁移：从旧后台导出的文章正文粘进来，标题、加粗斜体、列表和引用一次成型，演示源码 250 个字符转成 133 个字符，省掉逐个标签手改。
  • 写 README 与接口文档：接口平台生成的 HTML 表格和代码块转过来即可贴进仓库，围栏代码块不会被当成普通段落。
  • 统一团队写法：同一段源码，把「列表符号」从短横线切成星号，就能对齐团队规范，不用人肉替换。
  • 快速核对结构：看「处理的块级元素」和「输出行数」两张卡片。演示值 6 个块、14 行，和源码里肉眼数出来的块数一致，说明没有漏解析。

本页不做的事：不抓取网页地址（只解析你粘贴的文本）；不还原样式、脚本与内联事件；不处理不规范的嵌套标签（例如段落里直接塞 div），这类结构会按块级降级输出；不做反向的标记文本转 HTML。

原理和变量

① 用了哪个具体函数：先用 new DOMParser().parseFromString(源码, 'text/html') 把字符串解析成文档树，再对 body 的子节点做深度优先遍历。行内层用递归函数拼接文本，遇到 strong、a、code 等标签就套上对应标记；块级层每处理完一个元素追加一个空行。行内转义用 String.prototype.replace 把星号、下划线和反引号前面加反斜杠。

② 关键参数为什么这样取：标题默认 ATX，因为 h1 到 h6 都能表达，而 Setext 只能表达两级，选它会丢层级；列表默认短横线，因为它和强调符号的星号不会混淆；代码块默认围栏而不是缩进，因为缩进四空格在嵌套列表里会被误当成列表内容。

③ 遵循哪个约定：输出遵循 CommonMark 的基本约定：块之间空一行、无序列表用同一符号、围栏代码块单独成行、表格用管道符分隔；转义只针对会改变语义的三个字符（星号、下划线、反引号），不在普通中文里乱加反斜杠。

④ 输入怎么变成输出：演示源码共 6 个块。二级标题取 ## 快速开始；段落里 HTML 套双星号、Markdown 套单星号，得到「把 **HTML** 粘进来，立刻得到 *Markdown*。」；列表两行各加短横线；引用行加「> 」前缀；代码块套三反引号围栏；末尾段落直接输出。合计 133 个字符、14 行。

⑤ 边界与阈值：输入长度允许 1～50000 字符，超过会提示先分段；为空时提示「还没有粘贴源码」；输出为空（源码里只有脚本或样式）时提示没有可转换的块。递归不限层数但受浏览器栈限制，极端深嵌套可能失败，此时页面会提示转换中断。

⑥ 常见误用的正确解释：把网址粘进来没有任何效果——本页不联网；把整页 HTML（含导航栏、脚本、页脚）粘进来会把这些也转成正文，建议先只复制正文容器；「输出占输入的长度比」低（演示值 53.2%）是正常现象，标签本身占位但不进正文。

完整示例（数值仅作演示）

用页面默认的演示源码，四项选项保持 ATX、短横线、星号、围栏：

  • 第 1 行 <h2>快速开始</h2> → ## 快速开始。
  • 第 2 行段落 → 把 **HTML** 粘进来，立刻得到 *Markdown*。，两个行内标签各加一层强调标记。
  • 第 3 到 6 行的无序列表 → 两行 - 开头的列表项，其中第二个链接变成 [链接](https://example.com)。
  • 第 7 行引用 → > 提示：迁移前先备份原文。。
  • 第 8 行代码块 → 三反引号围栏包住 npm run build。
  • 第 9 行段落 → 结束。。合计 6 个块、133 字符、14 行。

把「代码块」切成「缩进四空格」，输出会变成 4 个空格起头的三行；把「强调符号」切成下划线，双星号会变成双下划线，字符总数保持 133 不变。

输入范围与对照表

对照表列出常见标签与对应的标记写法，前 12 行是标题、行内与列表，后 4 行是代码、分隔线、表格与转义。

常见 HTML 标签到标记文本的映射（默认选项下）
HTML 写法Markdown 写法块级/行内说明
<h1>标题</h1># 标题块级ATX 一级标题
<h2>标题</h2>## 标题块级演示源码用的层级
<h3>标题</h3>### 标题块级三级及以下只有 ATX
<h1>标题</h1>（Setext）标题 加等号下划线块级仅一级二级支持
<p>段落</p>段落 加空行块级块之间固定空一行
<strong>加粗</strong>**加粗**行内b 标签同样处理
<em>斜体</em>*斜体*行内i 标签同样处理
<a href="地址">文字</a>[文字](地址)行内行内链接形式
<img src="地址" alt="说明">![说明](地址)行内alt 作为替代文字
<ul><li>项</li></ul>- 项块级符号可切换
<ol><li>项</li></ol>1. 项块级序号自动递增
<blockquote><p>引用</p></blockquote>> 引用块级每行加前缀

对照表能看出层级上限：Setext 只能表达两级标题，所以三级及以下会自动回退到井号写法，这是选项切换时最容易被忽略的一点。

结果边界和舍入

统计口径：HTML转Markdown转换器的长度按字符数统计，一个汉字、一个英文字母、一个换行符都算 1，所以输出行数不同会直接影响长度。「输出占输入的长度比」= 输出长度 ÷ 输入长度 × 100，保留 1 位小数，用 Number(v.toFixed(1)) 取舍，演示值 133 ÷ 250 = 53.2%。

什么时候会提示：输入为空时提示「还没有粘贴源码」；输入超过 50000 字符时提示先分段；转换完成后输出为空说明源码里没有可转换的块（例如只有脚本和样式），也会明确提示，不会返回一个空框让你以为是成功。

被丢弃的内容：script、style、注释节点与内联事件属性都不会进入输出；表格会转成管道表格，但不保留合并单元格；不规范嵌套按块级降级，可能多出空行。

结果性质：这是结构等价的机械转换，不是语义校对。转换后请通读一遍，尤其是链接地址、图片路径和代码块缩进，必要时手工微调。

常见问题

能把网址直接转成标记文本吗？

不能。本页不联网，也不会抓取页面。请打开网页后复制正文源码，粘进输入框再转换。

为什么转换后少了很多内容？

脚本、样式、注释与内联事件会被主动丢弃，这些不属于正文。另外标签本身不进输出，所以长度比通常低于 100%，演示值 53.2% 属于正常。

Setext 模式下三级标题会怎样？

Setext 只能表达两级，三级及以下会自动回退成井号写法，不会丢内容，只是同一份输出里两种风格混用。

表格能保留合并单元格吗？

不能。表格转成管道表格，合并单元格会拆成普通单元格，跨行跨列信息会丢失，复杂的表格建议转换后手工重画。

中文里的星号会被转义吗？

会。行内文本里的星号、下划线和反引号都会加反斜杠转义，避免被当成强调或代码语法；普通中文和标点不受影响。

一次能转换多长？

上限 50000 字符，超过会提示分段。长文章建议按章节转换再合并，便于逐段核对。

转换结果能导出吗？

能。上方「复制结果」拿整段标记文本；对照表下方有「导出 CSV」（带 BOM）、「导出 JSON」（不带 BOM）与「复制对照表」（TSV）三个按钮。

我粘贴的源码会被上传吗？

不会。解析与转换都在浏览器内完成，刷新即清空；可在开发者工具的 Network 面板复查，点「开始转换」时不会发出任何请求。

相关工具