HTML 转纯文本:去标签、实体与转 Markdown

一、从网页复制来的东西有多脏

一段典型的网页内容长这样:

<h2>标题</h2><p>你好 &amp; 欢迎使用&nbsp;工具</p>
<script>alert(1)</script><style>.a{}</style>
<ul><li>甲</li><li>乙</li></ul>

三层脏东西:标签(h2、p、ul)、实体&amp;&nbsp;)、不该出现的块(script、style)。三种工具各管一层。

二、去标签:只留人读的文字

实测上面那段 HTML:

标题

你好 & 欢迎使用 工具

甲

乙

统计:移除 5 个标签、还原 2 个实体、丢弃 2 个脚本样式块,剩余 22 字符。

三个默认行为都值得说清:

  1. script 与 style 整块丢弃:里面是代码与样式规则,不是给人读的文字,混进正文只会变成噪声。真要分析这些代码,切到「保留脚本与样式文本」模式即可;
  2. 实体默认还原&amp; → &、&lt; → <、&nbsp; → 不换行空格、&#20320;&#x4F60; → 你(十进制与十六进制都认);
  3. 块级标签换行:h2、p、li 之间补空行,保留段落结构,而不是把所有文字挤成一坨。

一个必须破除的误区:去标签工具不能防 XSS。它只是把标签当字符串删掉,畸形嵌套、属性里藏代码、编码变体它一概不管。防注入必须由服务端在输出时按上下文转义——把「前端去标签」当安全措施是常见且危险的理解错误。

三、转 Markdown:保留结构而不是只留文字

去标签会丢掉「这是标题、这是列表」的信息;转 Markdown 则把这些结构翻译成对应语法:

HTMLMarkdown
<h2>标题</h2>## 标题
<ul><li>甲</li></ul>- 甲
<strong>加粗</strong>加粗
<table>管道表格
<script>整块丢弃

实测表格能完整转成管道表格(| A | B | + 分隔行 + 数据行),结构无损。

两个降级是语言本身的限制,不是工具的锅

  • 合并单元格无法还原:Markdown(含 GFM)的表格不支持跨行跨列,合并格的内容会落在第一个单元格、被合并的位置留空。要保留合并效果只能用 HTML 表格或截图;
  • script/style 丢弃:与去标签同理。

生成的是标准写法(文字 两侧紧贴、无多余空格),在 GitHub、Typora、VS Code、语雀都能正常渲染。

四、实体编码:五个必要字符与全部非 ASCII

实体的本质是用 ASCII 安全地表示特殊字符,两种级别用途完全不同:

级别处理范围用途
必要字符< > & " ' 五个网页正文、数据库存储——中文保持可读、体积小
全部非 ASCII中文、emoji 全转数字实体老接口、邮件头等不确定编码的环境——绝不乱码但长度翻倍

实测对比(输入「中文<测试>&ok」):

必要字符:中文&lt;测试&gt;&amp;ok(只转 3 个符号)
全部非 ASCII:&#x4E2D;&#x6587;&lt;&#x6D4B;&#x8BD5;&gt;&amp;ok

为什么空格不转成 &nbsp;&nbsp; 解码后是不换行空格(U+00A0),不是普通空格(U+0020)——转了会改变语义,编码再解码就对不回去了。工具保持空格原样,保证编码 → 解码往返一致

五、选择顺序:先问「要保留什么」

需求用哪个
只要人读的文字去标签
要保留标题、列表、表格结构转 Markdown
入库、防注入实体编码(必要字符级)
塞进不确定编码的通道实体编码(全部非 ASCII)

三者都在浏览器本地完成,含业务数据的内容也可以放心粘贴。

六、直接算

HTML 转 Markdown:结构化转换,表格与列表保留

去 HTML 标签:纯文本输出,含实体还原与统计

HTML 实体编码:解码与两种级别的编码

本站文章为个人使用经验的原创整理,除已注明来源的引用外均为本人撰写。文中涉及的软件名称、商标、截图等归各自权利人所有,引用仅用于说明与交流。如认为本站内容侵犯了你的合法权益,请通过「关于本站」页面的联系方式告知,核实后将及时更正或删除。