HTML 转 Markdown 转换器

已于 2025-06-27 13:53:54 修改
阅读量684 收藏 10
点赞数 23
CC 4.0 BY-SA版权
文章标签： css css3 javascript
于 2025-05-28 17:42:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148288657

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 转 Markdown 转换器</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            color: #333;
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
        }
        .container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        @media (min-width: 768px) {
            .container {
                flex-direction: row;
            }
        }
        .editor-container, .preview-container {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        textarea {
            width: 100%;
            min-height: 300px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: 'Consolas', 'Monaco', monospace;
            resize: vertical;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px 0;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        label {
            font-weight: bold;
            margin-bottom: 5px;
            display: block;
        }
        .preview-area {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 10px;
            min-height: 300px;
            background-color: #f9f9f9;
            white-space: pre-wrap;
            overflow-y: auto;
        }
        .footer {
            text-align: center;
            margin-top: 30px;
            color: #7f8c8d;
            font-size: 14px;
        }
        a {
            color: #3498db;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>HTML 转 Markdown 转换器</h1>
    
    <div class="container">
        <div class="editor-container">
            <label for="html-input">HTML 输入:</label>
            <textarea id="html-input" placeholder="在此粘贴HTML代码..."></textarea>
            <button id="convert-btn">转换为 Markdown ↓</button>
        </div>
        
        <div class="preview-container">
            <label for="markdown-output">Markdown 输出:</label>
            <div id="markdown-output" class="preview-area"></div>
            <button id="copy-btn">复制 Markdown</button>
        </div>
    </div>
    
 

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const htmlInput = document.getElementById('html-input');
            const markdownOutput = document.getElementById('markdown-output');
            const convertBtn = document.getElementById('convert-btn');
            const copyBtn = document.getElementById('copy-btn');
            
            // 转换按钮点击事件
            convertBtn.addEventListener('click', function() {
                const html = htmlInput.value.trim();
                if (html) {
                    const markdown = htmlToMarkdown(html);
                    markdownOutput.textContent = markdown;
                } else {
                    markdownOutput.textContent = '请输入HTML内容';
                }
            });
            
            // 复制按钮点击事件
            copyBtn.addEventListener('click', function() {
                const range = document.createRange();
                range.selectNode(markdownOutput);
                window.getSelection().removeAllRanges();
                window.getSelection().addRange(range);
                document.execCommand('copy');
                window.getSelection().removeAllRanges();
                
                // 显示复制成功提示
                const originalText = copyBtn.textContent;
                copyBtn.textContent = '已复制!';
                setTimeout(() => {
                    copyBtn.textContent = originalText;
                }, 2000);
            });
            
            // HTML 转 Markdown 函数
            function htmlToMarkdown(html) {
                // 创建一个临时div来解析HTML
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = html;
                
                // 递归处理所有节点
                function processNode(node) {
                    if (node.nodeType === Node.TEXT_NODE) {
                        return node.textContent;
                    }
                    
                    if (node.nodeType !== Node.ELEMENT_NODE) {
                        return '';
                    }
                    
                    const tagName = node.tagName.toLowerCase();
                    const children = Array.from(node.childNodes);
                    const content = children.map(processNode).join('');
                    
                    switch (tagName) {
                        case 'h1':
                            return `# ${content}\n\n`;
                        case 'h2':
                            return `## ${content}\n\n`;
                        case 'h3':
                            return `### ${content}\n\n`;
                        case 'h4':
                            return `#### ${content}\n\n`;
                        case 'h5':
                            return `##### ${content}\n\n`;
                        case 'h6':
                            return `###### ${content}\n\n`;
                        case 'p':
                            return `${content}\n\n`;
                        case 'br':
                            return '\n';
                        case 'hr':
                            return '---\n\n';
                        case 'strong':
                        case 'b':
                            return `**${content}**`;
                        case 'em':
                        case 'i':
                            return `*${content}*`;
                        case 'code':
                            return `\`${content}\``;
                        case 'pre':
                            return `\`\`\`\n${content}\n\`\`\`\n\n`;
                        case 'blockquote':
                            return `> ${content.replace(/\n/g, '\n> ')}\n\n`;
                        case 'ul':
                            const ulItems = Array.from(node.querySelectorAll('li'));
                            return ulItems.map(li => `- ${processNode(li).trim()}`).join('\n') + '\n\n';
                        case 'ol':
                            const olItems = Array.from(node.querySelectorAll('li'));
                            return olItems.map((li, i) => `${i + 1}. ${processNode(li).trim()}`).join('\n') + '\n\n';
                        case 'li':
                            return content;
                        case 'a':
                            const href = node.getAttribute('href') || '';
                            return `[${content}](${href})`;
                        case 'img':
                            const src = node.getAttribute('src') || '';
                            const alt = node.getAttribute('alt') || '';
                            return `![${alt}](${src})`;
                        case 'div':
                        case 'span':
                            return content;
                        default:
                            return content;
                    }
                }
                
                // 处理所有子节点
                const result = Array.from(tempDiv.childNodes)
                    .map(processNode)
                    .join('')
                    .replace(/\n{3,}/g, '\n\n') // 移除多余的空行
                    .trim();
                
                return result;
            }
        });
    </script>
</body>
</html>

ziblog
关注
Python之html与markdown互相转换
风口IT猪的成长录
11-25 6006
Python之html与markdown互相转换前言1. html2text2. html2markdown3. pandoc4. 批处理 前言 Typora可以很容易的将md导出为html，我一直都有想法就是将html还原为markdown，于是在网上整理了几种方法，以便后期使用。 如果你只是转换单个文件，推荐直接在线转换:Link Link Link 1. html2text pip install html2text 转换代码： import html2text md_text = open('r
将HTML转换为Markdown格式的文本是一种常见的需求
DhGrad_Bias的博客
10-04 347
本文将介绍如何使用PHP将HTML生成为Markdown格式的文本，并提供相应的源代码示例。从上面的示例可以看出，使用Parsedown库可以方便地将HTML转换为Markdown格式的文本。你可以根据需要自定义HTML的结构和样式，然后使用相应的PHP代码将其转换为Markdown。它具有简洁、易读、易写的特点，因此在将HTML转换为Markdown格式时，可以使文本更具可读性和可维护性。在上面的示例中，我们首先引入了Parsedown库，然后定义了要转换的HTML字符串。
HTML-to-Markdown 项目常见问题解决方案
gitblog_00335的博客
11-25 460
HTML-to-Markdown 项目常见问题解决方案 HTML-to-Markdown 是一个强大的 HTML 到 Markdown 转换器，能够将 HTML（甚至是整个网站）转换为干净、易读的 Markdown。它支持复杂的格式化，可自定义的选项，并通过插件实现转换过程的全控制。该项目主要使用 Golang 编程语言开发。 新手常见问题及解决步骤 问题一：如何安装和使用 HTML-to-Mar...
html-to-markdown：项目核心功能
最新发布
gitblog_00590的博客
06-12 316
html-to-markdown：项目核心功能 将HTML转换为Markdown格式。 项目介绍 html-to-markdown 是一个使用Go语言编写的库，它能够将HTML内容转换为Markdown格式。这个项目采用了一个HTML解析器（goquery），以避免尽可能多地使用正则表达式，这样可以防止一些异常情况，并允许它在输入完全未知的情况下使用。 项目技术分析 html-to-markdow...
ChatGPT对话：如何把Html文件转换为Markdown文件
uestcai的博客
07-15 2707
【编者按】ChatGPT提供了多种方法。编者常用VS Code，所以想使用VS Code解决问题，但ChatGPT提供了一些错误的方法，失败了。最后发现编写python程序最简单。
【亲测免费】 探索高效工具：html2md——HTML到Markdown转换器
gitblog_01193的博客
08-30 472
探索高效工具：html2md——HTML到Markdown转换器 在数字化时代，内容创作和文档管理是每个开发者和内容创作者不可或缺的一部分。面对繁杂的HTML代码，如何快速、准确地转换为简洁的Markdown格式，一直是技术领域的一个挑战。今天，我们将介绍一款强大的开源工具——html2md，它能够帮助你轻松完成这一任务。 项目介绍 html2md是一个基于Go语言开发的命令行工具，专门用于将HT...
Confluence HTML转Markdown转换器：助力迁移GitLab Wiki
资源摘要信息:"Confluence HTML到Markdown转换器是一个工具，主要用于将Confluence HTML导出的文件转换为Markdown格式。这种转换的平均成功率达到85%，适用于将现有Confluence空间迁移到支持Markdown的Wiki系统，...
php-使用php开发的html转换为markdown的转换器.zip
03-04
总之，这个PHP实现的HTML到Markdown转换器是开发工具箱中的一个实用组件，它简化了内容在两种格式间的转换，提高了工作效率。理解其工作原理和使用方法，可以帮助开发者更好地处理和管理文本内容。
confluence-html-to-md:Confluence 导出 html 到 Markdown 转换器
06-25
Confluence 导出 html 到 Markdown 转换器 安装 npm i -g princed/confluence-html-to-md 用法 在包含从 Confluence 导出confluence-html-to-md文件夹中运行confluence-html-to-md 。
HTML2MD:HTML到Markdown转换器，允许使用任何HTML编辑器生成Markdown文档
03-05
HTML2MD是从HTML到Markdown的简单转换器。 它允许使用许多简单的WYSIWYG或WYSIWYM HTML编辑器来管理Markdown文档。 该脚本已使用Microsoft FrontPage Express进行了测试，该软件为固件且非常简单的WYSIWYG HTML编辑...
Turndown用JavaScript编写的HTML到Markdown转换器
08-10
《Turndown：JavaScript实现的HTML到Markdown转换器详解》 在互联网内容的创作与分享过程中，Markdown和HTML两种标记语言扮演着至关重要的角色。HTML是网页的基础，用于构建丰富的结构化内容，而Markdown则以其简洁...
【亲测免费】 HTML到Markdown转换工具
gitblog_01011的博客
11-27 373
HTML到Markdown转换工具 项目基础介绍 本项目是一个开源的HTML到Markdown转换工具，主要使用Go语言编写。它可以将HTML代码，甚至是整个网站，转换成清晰可读的Markdown格式。项目支持复杂的格式化选项、自定义配置以及插件扩展，提供了完整的转换过程控制。 核心功能 加粗与斜体：支持文字的加粗和斜体，即使是在单个单词内也是如此。 列表：处理有序和无序列表，并支持完整的嵌套。...
HTML 转 Markdown 项目教程
gitblog_01068的博客
08-10 405
HTML 转 Markdown 项目教程 1. 项目的目录结构及介绍 html-to-markdown/ ├── src/ │ ├── Converter.php │ ├── Environment.php │ ├── HtmlConverter.php │ ├── Rule.php │ ├── RuleInterface.php │ └── rules/ │ ...
HTML 转 Markdown 项目常见问题解决方案
gitblog_00025的博客
11-05 556
HTML 转 Markdown 项目常见问题解决方案 项目基础介绍 HTML 转 Markdown 项目是一个使用 PHP 编写的开源库，旨在将 HTML 代码转换为 Markdown 格式。该项目的主要目的是帮助开发者将现有的 HTML 文档转换为更易于编辑和管理的 Markdown 格式。项目的主要编程语言是 PHP，适用于 PHP 7.2 及以上版本。 新手使用注意事项及解决方案 1. 依赖...
前端 html格式转md格式插件使用介绍
Pima
06-03 1081
html转gfm md 推荐 turndown 支持自定义过滤规则。
html文档如何转化为.md格式
qq_20984273的博客
01-24 4711
2. [HTML to Markdown Converter](https://domchristie.github.io/to-markdown/): 一个简单的在线工具，可以将HTML内容转换为Markdown。你可以从 [Pandoc的官方网站](https://pandoc.org/installing.html) 获取安装说明。1. [Pandoc Online](https://pandoc.org/try/): Pandoc 是一个强大的文档转换工具，支持HTML到Markdown的转换。
html表格转换为markdown
u012399690的博客
06-06 579
本文介绍了一款基于Go语言开发的HTML表格转Markdown工具。该工具通过读取剪贴板中的HTML内容，自动识别并提取首个表格，将其转换为标准的Markdown格式后重新写入剪贴板。核心功能包括：跨平台剪贴板交互、HTML表格智能识别、精准格式转换（保留表格结构并添加Markdown语法）。实现方案使用atotto/clipboard库处理剪贴板操作，通过字符串扫描定位表格位置，并设计了专门的转换规则来保持格式完整。该工具简化了网页表格到Markdown的转换流程，提高了文档处理效率。
PHP html to markdown
weixin_43500152的博客
01-11 1647
html-to-markdown: 用PHP转换HTML到Markdown
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值