本文详细介绍如何在 JavaScript 环境中使用 Turndown 库将 HTML 内容转换为 Markdown 格式。涵盖通过 npm 安装、ES6 import 及 CommonJS require 引入方式,演示浏览器 script 标签引入及 DOM 节点转换方法,并解析 bulletListMarker 等参数配置,帮助开发者快速掌握 HTML 到 Markdown 的转换技巧。
前言
本文介绍在 JavaScript 中将 HTML 转换为 Markdown 的方法。建议收藏,以备不时之需。
安装依赖
主要依赖 Turndown 库来完成转换工作。
使用 npm 进行安装。
npm i turndown在 ES6 模块中引入:
import TurndownService from 'turndown'在 CommonJS 环境中引入:
const TurndownService = require('turndown');完成引入后,即可进行基础使用。
import TurndownService from 'turndown';
const html = `
<h1>Learn Web Development</h1>
<p>Check out <a href="https://codingbeautydev.com/blog" rel="external nofollow" rel="external nofollow" >Coding Beauty</a> for some great tutorials!</p>
`;
// Create an instance of the Turndown service
const turndownService = new TurndownService();
const markdown = turndownService.turndown(html);
console.log(markdown);转换结果如下所示:
Learn Web Development ===================== Check out [Coding Beauty](https://codingbeautydev.com/blog) for some great tutorials!
脚本引入
除 npm 安装外,还可通过 <script> 标签引入库文件进行调用:
<script src="https://unpkg.com/turndown/dist/turndown.js"></script>调用方式与前述示例相同。
const html = `
<h1>Learn Web Development</h1>
<p>Check out <a href="https://codingbeautydev.com/blog" rel="external nofollow" rel="external nofollow" >Coding Beauty</a> for some great tutorials!</p>
`;
// Create an instance of the Turndown service
const turndownService = new TurndownService();
const markdown = turndownService.turndown(html);
console.log(markdown);此外,还可以直接对 DOM 节点执行转换操作。
// convert document <body> to Markdown
const bodyMarkdown = turndownService.turndown(document.body);参数配置
Turndown 支持部分参数配置。
例如 bulletListMarker 属性,用于指定 Markdown 列表项的标记符号:
import TurndownService from 'turndown';
const html = `
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript<li>`;
// Specifying options when creating an instance of the
// Turndown service
const turndownService = new TurndownService({ bulletListMarker: '-' });
const markdown = turndownService.turndown(html);
console.log(markdown);输出效果如下:
- HTML - CSS - JavaScript
更多属性配置请参考 GitHub 仓库:github.com/mixmark-io/…

总结:在 JavaScript 中将 HTML 转换为 Markdown,推荐使用 Turndown 库。
本文介绍了 JavaScript 实现 HTML 转 Markdown 的方法。更多相关内容请搜索本站历史文章或浏览后续文章,感谢支持。