在Web开发场景中，Markdown凭借简洁的语法被广泛应用于内容编辑、文档展示等场景，用JavaScript解析Markdown将其转换为HTML是很多项目的常见需求。实现这个需求可以选择原生手写解析逻辑，也可以直接使用成熟的第三方库，两种方案各有适用场景。
原生解析的基本思路
如果不想引入第三方依赖，可以基于正则表达式实现简单的Markdown解析。核心思路是匹配Markdown的语法规则，比如标题、加粗、列表、链接等，再替换为对应的HTML标签。不过这种方式只适合处理简单的Markdown文本，复杂语法很难覆盖全面。
下面是一个简单的加粗和标题解析示例：
function simpleMarkdownParse(text) {
let result = text;
// 解析标题，匹配#开头的行，最多支持6级标题
result = result.replace(/^#{1,6}\s+(.+)$/gm, (match, content) => {
const level = match.trim().split(' ')[0].length;
return `<h${level}>${content}</h${level}>`;
});
// 解析加粗，匹配**包裹的内容
result = result.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
return result;
}
// 测试示例
const mdText = `# 测试标题
这是一段**加粗文本**的内容`;
console.log(simpleMarkdownParse(mdText));使用第三方库解析
实际项目中更推荐使用成熟的第三方库，它们覆盖了完整的CommonMark语法，还支持扩展功能，稳定性和兼容性都更好。目前主流的库有marked和markdown-it，下面分别介绍它们的用法。
使用marked库解析
marked是轻量且性能优秀的Markdown解析库，使用非常简单，支持浏览器和Node.js环境。
首先安装marked：
npm install marked
基础使用代码如下：
import { marked } from 'marked';
const markdownText = `## 功能列表
- 支持标题解析
- 支持列表解析
- 支持链接：[示例网站](https://ipipp.com)
这是一段*斜体*文本`;
// 解析为HTML
const htmlResult = marked.parse(markdownText);
console.log(htmlResult);使用markdown-it库解析
markdown-it功能更丰富，支持插件扩展，还可以自定义渲染规则，适合需要定制化解析的场景。
安装方式：
npm install markdown-it
基础使用示例：
import markdownit from 'markdown-it';
// 初始化解析器，可传入配置项
const md = markdownit({
html: true, // 允许在Markdown中嵌入HTML
linkify: true // 自动识别链接
});
const mdContent = `### 代码示例
\`\`\`javascript
const a = 1;
\`\`\`
访问 https://ipipp.com 查看详情`;
const renderedHtml = md.render(mdContent);
console.log(renderedHtml);两种方案对比
我们可以通过下面的表格对比不同解析方案的特点：
| 方案类型 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 原生正则解析 | 无额外依赖，体积小 | 语法覆盖不全，复杂场景易出错 | 仅需处理极简单Markdown文本的场景 |
| marked库 | 轻量、性能高、上手简单 | 扩展能力相对有限 | 常规Markdown解析需求，追求轻量化的项目 |
| markdown-it库 | 功能丰富、支持插件、可自定义规则 | 体积相对较大，配置稍复杂 | 需要定制化解析、扩展特殊语法的项目 |
注意事项
解析Markdown得到HTML后，如果直接渲染到页面，需要注意XSS安全风险。如果Markdown内容来自用户输入，建议配合DOMPurify等库对生成的HTML进行过滤，避免恶意脚本注入。
另外，不同库对Markdown语法的支持程度略有差异，如果项目需要严格遵循CommonMark规范，选择库时可以提前查看其语法支持列表，确保满足需求。
JavaScriptMarkdown解析marked库markdown-itCommonMark修改时间：2026-06-07 03:17:45