当前位置：首页 > JavaScript

markdown js实现

2026-02-01 00:30:33JavaScript

Markdown 在 JavaScript 中的实现方法

使用现有库解析 Markdown

推荐使用成熟的库如 marked.js 或 showdown，它们能快速将 Markdown 转换为 HTML。

安装 marked：

npm install marked

基本用法：

import { marked } from 'marked';

const markdownText = '# Heading\n\nThis is bold text.';
const htmlOutput = marked.parse(markdownText);
console.log(htmlOutput); // 输出解析后的 HTML

自定义简单解析器

若需轻量级实现，可通过正则表达式处理基础语法：

function parseMarkdown(markdown) {
    // 处理标题
    let html = markdown.replace(/^# (.*$)/gm, '<h1>$1</h1>');
    // 处理粗体
    html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
    // 处理链接
    html = html.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>');
    return html;
}

const result = parseMarkdown('[Google](https://google.com)');
console.log(result); // <a href="https://google.com">Google</a>

支持代码高亮

结合 highlight.js 实现代码块高亮：

import hljs from 'highlight.js';

marked.setOptions({
    highlight: (code, lang) => hljs.highlight(lang, code).value
});

const codeMarkdown = '```js\nconsole.log("Hello");\n```';
console.log(marked.parse(codeMarkdown));

安全防护

使用 DOMPurify 防止 XSS 攻击：

import DOMPurify from 'dompurify';

const dirtyHtml = marked.parse('<script>alert(1)</script>');
const cleanHtml = DOMPurify.sanitize(dirtyHtml);

实时预览

通过事件监听实现编辑器实时渲染：

markdown js实现

document.getElementById('editor').addEventListener('input', (e) => {
    document.getElementById('preview').innerHTML = marked.parse(e.target.value);
});