如何实现一个JavaScript的Markdown解析器？-js教程-PHP中文网

如何实现一个JavaScript的Markdown解析器？

紅蓮之龍

发布： 2025-10-03 22:24:02

原创

252人浏览过

答案：实现JavaScript Markdown解析器需先按行处理块级元素如标题、列表，再通过正则替换行内格式如加粗、链接。示例代码分两步：parseMarkdown分割文本并识别结构，inlineParse转换加粗、斜体、链接和行内代码，支持标题、无序列表、段落等基础语法，并建议扩展代码块、引用、表格及AST构建以提升健壮性。

如何实现一个javascript的markdown解析器？

实现一个 JavaScript 的 Markdown 解析器，核心是将 Markdown 格式的文本转换为 HTML。虽然你可以使用现成的库如 marked 或 remarkable，但自己实现能帮助理解解析流程。下面是一个简化版的实现思路和代码示例。

1. 理解常见 Markdown 语法

先明确要支持哪些语法，比如：

# 标题（h1 到 h6）
**加粗** 和 *斜体*
[链接](url)
行内代码 `code` 和代码块 ```...```
无序列表 - 或 *
段落（空行分隔）

2. 分步处理：按行解析 + 正则替换

一个简单策略是先按行分割，识别块级元素（如标题、列表、段落），再对每行内容做行内格式化（如加粗、链接）。

示例代码结构：

立即学习“Java免费学习笔记（深入）”；

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

function parseMarkdown(text) {
  const lines = text.split('\n');
  const html = [];
  let inList = false;

  for (let line of lines) {
    line = line.trim();

    // 处理标题
    if (/^#{1,6}\s/.test(line)) {
      const level = line.match(/^#+/)[0].length;
      const content = line.slice(level).trim();
      html.push(`<h${level}>${inlineParse(content)}</h${level}>`);
      continue;
    }

    // 处理无序列表
    if (/^[-*]\s/.test(line)) {
      if (!inList) {
        html.push('<ul>');
        inList = true;
      }
      const content = line.replace(/^[-*]\s/, '').trim();
      html.push(`<li>${inlineParse(content)}</li>`);
      continue;
    }

    // 结束列表
    if (inList && line !== '') {
      html.push('</ul>');
      inList = false;
    }

    // 处理段落
    if (line !== '') {
      html.push(`<p>${inlineParse(line)}</p>`);
    }
  }

  // 确保列表闭合
  if (inList) {
    html.push('</ul>');
  }

  return html.join('');
}

登录后复制

3. 实现行内格式解析

定义 inlineParse 函数，用正则替换加粗、斜体、链接等。

function inlineParse(text) {
  text = text
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')     // 加粗
    .replace(/\*(.*?)\*/g, '<em>$1</em>')                 // 斜体
    .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>') // 链接
    .replace(/`(.*?)`/g, '<code>$1</code>');               // 行内代码

  return text;
}

登录后复制