悠悠楠杉
网站页面
原生JS实现HTML转Markdown功能
06/08
1.1 提取内容
- 解析HTML以获取其标题（
<h1>,<h2>等）、段落（<p>）、关键词（通过特定标签或文本分析）和描述（通常为段落或特定内容）。
1.2 格式化
- 将标题、关键词、描述和正文以Markdown格式进行组织。
- 标题使用
#表示不同级别（如# 标题为一级标题）。 - 描述通常以简短段落形式出现，使用
##或###作为次级标题。 - 关键词以列表形式呈现，使用
-前缀。 - 正文为纯文本，但可适当使用换行和缩进以提升可读性。
- 标题使用
2. 实现代码示例
```javascript
function htmlToMarkdown(html) {
// 使用DOMParser解析HTML字符串
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const body = doc.body;
const allTexts = []; // 存储所有文本内容，用于关键词和描述的提取
const elements = body.querySelectorAll('h1, h2, h3, p'); // 选择所有可能的标题和段落元素
let markdownContent = ''; // 存储Markdown格式的最终内容
// 遍历所有元素，构建Markdown格式的文本
elements.forEach(element => {
if (element.tagName === 'H1' || element.tagName === 'H2' || element.tagName === 'H3') {
// 标题直接加入Markdown内容，转换为Markdown标题格式
markdownContent += `# ${element.textContent}\n\n`;
} else if (element.tagName === 'P') {
// 段落处理，用于正文和描述
allTexts.push(element.textContent); // 存储段落文本以便后续处理描述和关键词
markdownContent += `- ${element.textContent}\n\n`; // 在Markdown中以列表形式显示段落，适用于描述和正文分割
}
});
// 合并所有段落文本为单一描述字符串，并生成Markdown描述部分（此处简化处理）
const description = allTexts.join(' '); // 假设描述为所有段落的简单拼接（实际应用中应更复杂）
markdownContent += `## 描述\n${description}\n\n`; // Markdown次级标题和描述内容
// 输出Markdown内容，实际应用中可以按需返回或写入文件等操作
console.log(markdownContent);
}
```
3. 使用方法示例：
javascript
const htmlContent = `<!DOCTYPE html><html><head><title>示例页面</title></head><body><h1>主标题</h1><p>这是正文的第一段。</p><p>这是第二段，包含一些重要信息。</p><h2>子标题</h2><p>这是子标题下的内容。</p></body></html>`;
htmlToMarkdown(htmlContent); // 调用函数，输出Markdown格式的文本到控制台
4. 注意点：
- 这个简单的实现假设每个
<h1>、<h2>、<h3>后都跟着一个<p>作为其下的正文或描述，实际场景可能需要更复杂的逻辑来准确区分不同部分。 - 关键词的提取没有在示例中实现，这通常需要更复杂的自然语言处理技术或正则表达式来从文本中提取关键词。
