JavaScript 使用 Turndown 库将 HTML 转换为 Markdown 详解

作者:像素猫时间:2026-10-26 05:09:25浏览:166

本文详细介绍如何在 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 的方法。更多相关内容请搜索本站历史文章或浏览后续文章,感谢支持。

作者最新文章