JavaScript无依赖Markdown转HTML函数补充项目符号解析正则咨询

实现方案 #

无需引入第三方依赖，通过两步正则替换即可实现无序列表的解析，注意要把列表相关的替换逻辑放在斜体（*包裹内容）的替换之前，避免* 开头的列表项被误识别为斜体格式。

核心逻辑 #

1. 先把所有行首以- 、* 、+ （支持前面带空格适配缩进）开头的内容转换为<li>标签包裹的列表项
2. 再把连续的多个<li>块统一包裹在<ul>标签中

修改后的完整代码 #

export function markdownToHtml(mdText) {
  const toHTML = mdText
    // 处理列表项：匹配行首0+空格 + -/*/+ + 空格 + 内容
    .replace(/^\s*([-+*])\s(.*)$/gim, '<li>$2</li>')
    // 把连续的li块包裹进ul标签
    .replace(/(<li>.*?<\/li>)/gims, '<ul>$1</ul>')
    // 原有标签处理逻辑
    .replace(/^### (.*$)/gim, "<h3>$1</h3>") // h3标签
    .replace(/^## (.*$)/gim, "<h2>$1</h2>") // h2标签
    .replace(/^# (.*$)/gim, "<h1>$1</h1>") // h1标签
    .replace(/\*\*(.*)\*\*/gim, "<b>$1</b>") // 加粗文本
    .replace(/\*(.*)\*/gim, "<i>$1</i>") // 斜体文本
    .replace(/\[(.*?)\]\((.*?)\)/gim, "<a href='$2'>$1</a>") // 链接
  return toHTML.trim() // 移除首尾空白字符
}

扩展说明 #

当前实现支持单层无序列表，如果需要支持多层嵌套列表，可额外增加层级匹配逻辑，根据列表项前的缩进空格数判断嵌套层级，生成嵌套的<ul>结构即可，无需引入额外依赖。

内容的提问来源于stack exchange，提问作者Pato