Turndown规则系统终极指南：如何自定义HTML标签转换逻辑
项目地址: https://gitcode.com/gh_mirrors/tu/turndown Turndown是一个强大的JavaScript库，专门用于将HTML转换为Markdown格式。作为一款高效的HTML转Markdown工具，Turndown通过其灵活的规则系统让开发者能够完全控制转换过程。本文将深入揭秘Turndown的规则系统，教你如何自定义HTML标签的转换逻辑。
🔧 Turndown规则系统架构
Turndown的核心规则系统位于src/rules.js，它管理着所有转换规则。规则按照特定优先级执行，确保转换过程的一致性和可预测性。
规则优先级顺序
- 空白规则 - 处理只包含空白字符的元素
- 自定义规则 - 通过
addRule方法添加的规则 - CommonMark规则 - 标准Markdown转换规则
- 保留规则 - 通过
keep方法设置的规则 - 移除规则 - 通过
remove方法设置的规则 - 默认规则 - 处理未被其他规则覆盖的节点
🎯 三种核心自定义方法
1. 使用addRule添加自定义规则
addRule是Turndown最强大的功能之一，让你可以为特定HTML标签定义转换逻辑。每个规则包含两个关键属性：filter和replacement。
// 示例：为删除线标签添加自定义规则
turndownService.addRule('strikethrough', {
filter: ['del', 's', 'strike'],
replacement: function (content) {
return '~' + content + '~'
}
})
2. 使用keep保留HTML元素
当你希望某些HTML元素在转换后仍然保持原样时，可以使用keep方法：
// 保留del和ins标签的HTML格式
turndownService.keep(['del', 'ins'])
3. 使用remove完全移除元素
remove方法允许你完全删除特定的HTML元素及其内容：
// 移除del标签及其内容
turndownService.remove('del')
💡 实际应用场景
场景一：处理自定义组件
假设你的HTML中包含自定义的<my-component>标签，你可以这样处理：
turndownService.addRule('my-component', {
filter: 'my-component',
replacement: function (content, node) {
var attr = node.getAttribute('data-type')
return `[${attr}: ${content}]`
}
场景二：适配特殊格式需求
如果你需要将特定的HTML结构转换为自定义的Markdown扩展语法：
turndownService.addRule('highlight', {
filter: function (node) {
return node.nodeName === 'SPAN' &&
node.classList.contains('highlight')
},
replacement: function (content) {
return '==' + content + '=='
}
})
🛠️ 规则配置详解
filter属性的三种形式
- 字符串：
filter: 'p'- 选择所有<p>元素 - 数组：
filter: ['em', 'i']- 选择<em>或<i>元素 - 函数：更复杂的过滤逻辑
replacement函数的参数
content：节点的文本内容node：DOM节点本身options：TurndownService的配置选项
📁 核心源码文件
- src/turndown.js - 主服务类，包含所有公共方法
- src/rules.js - 规则管理系统
- src/commonmark-rules.js - 标准Markdown规则定义
🚀 最佳实践建议
- 按优先级设计规则：理解规则执行顺序，避免冲突
- 测试边界情况：确保自定义规则在各种场景下都能正常工作
- 利用插件系统：对于复杂的转换需求，考虑开发专用插件
通过掌握Turndown的规则系统，你可以轻松应对各种HTML到Markdown的转换需求，无论是处理标准HTML标签还是自定义组件，都能游刃有余。这个强大的工具为内容转换提供了无限的可能性！✨
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
