js 实现markdown
实现 Markdown 解析的基本思路
在 JavaScript 中实现 Markdown 解析通常涉及以下核心步骤：解析文本为抽象语法树（AST），再将 AST 转换为目标格式（如 HTML）。以下是具体实现方法。
使用正则表达式实现简单解析
对于基础需求，可以通过正则表达式匹配 Markdown 语法并替换为 HTML。例如解析标题和段落：
function parseMarkdown(markdown) {
// 解析标题（如 ## Heading -> <h2>Heading</h2>）
let html = markdown.replace(/^#{1,6}\s(.+)$/gm, (match, p1) => {
const level = match.match(/#/g).length;
return `<h${level}>${p1}</h${level}>`;
});
// 解析段落（普通文本 -> <p>text</p>）
html = html.replace(/^(?!<h\d>)(.+)$/gm, '<p>$1</p>');
return html;
}使用现有库（如 marked.js）
推荐使用成熟的库如 marked.js 实现完整功能：
import { marked } from 'marked';
const markdown = '# Hello World';
const html = marked.parse(markdown);
console.log(html); // 输出: <h1>Hello World</h1>自定义渲染规则
若需定制输出，可覆盖默认渲染器。例如修改链接的渲染行为：
const renderer = new marked.Renderer();
renderer.link = (href, title, text) => {
return `<a href="${href}" target="_blank">${text}</a>`;
};
marked.setOptions({ renderer });处理代码块与语法高亮
结合 highlight.js 实现代码高亮：
import hljs from 'highlight.js';
marked.setOptions({
highlight: (code, lang) => {
return hljs.highlightAuto(code, [lang]).value;
}
});安全性处理
防止 XSS 攻击需清理 HTML：
import DOMPurify from 'dompurify';
const unsafeHtml = marked.parse(userInput);
const safeHtml = DOMPurify.sanitize(unsafeHtml);性能优化建议
对于大型文档，采用异步解析避免阻塞：
marked.parse(markdownText, { async: true })
.then(html => console.log(html));注意事项
- 复杂表格、数学公式等需依赖扩展（如 markdown-it）
- 行内 HTML 和注释需显式启用配置选项
- 考虑服务端渲染（SSR）时兼容 Node.js 环境
