${processChildren(node, listLevel)}
\n\n`;
// 不递归处理了，直接在这里进行解析
const iframe = node.querySelector("iframe");
const src = iframe.getAttribute("src") || "";
const title = node.querySelector("p").textContent || "";
const iframeHTML = iframe.outerHTML.replace(
">",
' style="width: 100%; aspect-ratio: 2;">'
); // Ensure video box is full width
result += `\n\n`;
} else if (className.includes("toc")) {
const customTitle = node.querySelector("h4").textContent || "";
result += `**${customTitle}**\n\n[TOC]\n\n`;
} else {
result += processChildren(node, listLevel);
}
}
break;
case "span":
{
const node_class = node.getAttribute("class");
if (node_class) {
if (node_class.includes("katex--inline")) {
// class="katex-mathml"
const mathml = clearSpecialChars(node.querySelector(".katex-mathml").textContent);
const katex_html = clearSpecialChars(node.querySelector(".katex-html").textContent);
// result += ` $${mathml.replace(katex_html, "")}$ `;
if (mathml.startsWith(katex_html)) {
result += ` $${mathml.replace(katex_html, "")}$ `;
} else {
// 字符串切片，去掉 mathml 开头等同长度的 katex_html，注意不能用 replace，因为 katex_html 里的字符顺序可能会变
result += ` $${mathml.slice(katex_html.length)}$ `;
}
break;
} else if (node_class.includes("katex--display")) {
const mathml = clearSpecialChars(node.querySelector(".katex-mathml").textContent);
const katex_html = clearSpecialChars(node.querySelector(".katex-html").textContent);
// result += `$$\n${mathml.replace(katex_html, "")}\n$$\n\n`;
if (mathml.startsWith(katex_html)) {
result += `$$\n${mathml.replace(katex_html, "")}\n$$\n\n`;
} else {
// 字符串切片，去掉 mathml 开头等同长度的 katex_html，注意不能用 replace，因为 katex_html 里的字符顺序可能会变
result += `$$\n${mathml.slice(katex_html.length)}\n$$\n\n`;
}
break;
}
}
const style = node.getAttribute("style") || "";
if (style.includes("background-color") || style.includes("color")) {
result += `${processChildren(node, listLevel)}`;
} else {
result += processChildren(node, listLevel);
}
}
break;
case "kbd":
result += ` ${node.textContent} `;
break;
case "mark":
result += ` ${processChildren(node, listLevel)} `;
break;
case "sub":
result += `${processChildren(node, listLevel)}`;
break;
case "sup":
{
const node_class = node.getAttribute("class");
if (node_class && node_class.includes("footnote-ref")) {
result += `[^${node.textContent}]`;
} else {
result += `${processChildren(node, listLevel)}`;
}
}
break;
case "svg":
{
const style = node.getAttribute("style");
if (style && style.includes("display: none")) {
break;
}
// 必须为 foreignObject 里的 div 添加属性 xmlns="http://www.w3.org/1999/xhtml" ，否则 typora 无法识别
const foreignObjects = node.querySelectorAll("foreignObject");
for (const foreignObject of foreignObjects) {
const divs = foreignObject.querySelectorAll("div");
divs.forEach((div) => {
div.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
});
}
// 检查是否有 style 标签存在于 svg 元素内，如果有，则需要将 svg 元素转换为 img 元素，用 Base64 编码的方式显示。否则直接返回 svg 元素
if (node.querySelector("style")) {
const base64 = svgToBase64(node.outerHTML);
// result += `
`;
result += `\n\n`;
} else {
result += `${node.outerHTML}
\n\n`;
}
}
break;
case "section": // 这个是注脚的内容
{
const node_class = node.getAttribute("class");
if (node_class && node_class.includes("footnotes")) {
result += processFootnotes(node);
}
}
break;
case "input":
// 仅处理 checkbox 类型的 input 元素
if (node.getAttribute("type") === "checkbox") {
result += `[${node.checked ? "x" : " "}] `;
}
break;
case "dl":
// 自定义列表，懒得解析了，直接用 html 吧
result += `${shrinkHtml(node.outerHTML)}\n\n`;
break;
default:
result += processChildren(node, listLevel);
result += "\n\n";
break;
}
break;
case TEXT_NODE:
result += escapeMarkdown(node.textContent);
break;
case COMMENT_NODE:
// Ignore comments
break;
default:
break;
}
return result;
}
/**
* 处理给定节点的子节点。
* @param {Node} node - 父节点。
* @param {number} listLevel - 当前列表嵌套级别。
* @returns {string} - 子节点拼接后的 Markdown 字符串。
*/
function processChildren(node, listLevel) {
let text = "";
node.childNodes.forEach((child) => {
text += processNode(child, listLevel);
});
return text;
}
/**
* 处理列表元素 (- 或
- 子元素 const listItems = node.querySelectorAll("li"); let result = ""; // 遍历每个
- 元素 listItems.forEach((li, index) => { // 将
- 的 textContent 添加到结果中
result += li.textContent;
result += "\n";
});
return result;
}
/**
* 处理脚注。
* @param {Element} node - 包含脚注的元素。
* @returns {string} - 脚注的 Markdown 字符串。
*/
function processFootnotes(node) {
const footnotes = Array.from(node.querySelectorAll("li"));
let result = "";
footnotes.forEach((li, index) => {
const text = processNode(li).replaceAll("\n", " ").replaceAll("↩︎", "").trim();
result += `[^${index + 1}]: ${text}\n`;
});
return result;
}
// Start processing child nodes
content.childNodes.forEach((child) => {
markdown += processNode(child);
});
// // Trim excessive newlines
// markdown = markdown.replace(/[\n]{3,}/g, '\n\n');
return markdown.trim();
}
/**
* 将文本保存为文件。
* @param {string} text
* @param {string} filename
*/
function saveTextAsFile(text, filename) {
const blob = new Blob([text], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
/**
* 下载文章内容并转换为 Markdown 格式。并保存为文件。这里会额外获取文章标题和文章信息并添加到 Markdown 文件的开头。
* @param {Document} doc_body - 文章的 body 元素。
* @returns {Promise
} - 下载完成后的 Promise 对象。 */ async function downloadCSDNArticleToMarkdown(doc_body) { const articleTitle = doc_body.querySelector("#articleContentId")?.textContent.trim() || "未命名文章"; const articleInfo = doc_body .querySelector(".bar-content") ?.textContent.replace(/\s{2,}/g, " ") .trim() || ""; const htmlInput = doc_body.querySelector("#content_views"); if (!htmlInput) { alert("未找到文章内容。"); return; } let markdown = htmlToMarkdown(htmlInput); markdown = `# ${articleTitle}\n\n> ${articleInfo}\n\n${markdown}`; saveTextAsFile(markdown, `${articleTitle}.md`); } /** * 下载文章内容并转换为 Markdown 格式。 * @param {string} url - 文章的 URL。 * @returns {Promise } - 下载完成后的 Promise 对象。 */ async function downloadArticle(url) { const response = await fetch(url); const text = await response.text(); const parser = new DOMParser(); const doc = parser.parseFromString(text, "text/html"); // 在这里处理文章内容并转换为 Markdown const title = doc.title; // alert('正在下载文章：' + title); // alert 会阻塞页面，所以这里要用别的方式显示提示信息，在页面上方显示一个悬浮提示框 if (document.getElementById("myInfoFloatTip")) { document.getElementById("myInfoFloatTip").remove(); } const floatTip = document.createElement("div"); floatTip.style.position = "fixed"; floatTip.style.top = "40%"; floatTip.style.left = "50%"; floatTip.style.transform = "translateX(-50%)"; floatTip.style.padding = "10px"; floatTip.style.backgroundColor = "rgba(0, 0, 0, 0.7)"; floatTip.style.color = "#fff"; floatTip.style.borderRadius = "5px"; floatTip.style.boxShadow = "0 2px 5px rgba(0, 0, 0, 0.5)"; floatTip.style.zIndex = "9999"; floatTip.textContent = "正在下载文章：" + title; floatTip.id = "myInfoFloatTip"; document.body.appendChild(floatTip); // 调用下载函数 downloadCSDNArticleToMarkdown(doc.body); } /** * 下载专栏的全部文章为 Markdown 格式。 * @returns {Promise } - 下载完成后的 Promise 对象。 */ async function downloadCSDNCategoriesToMarkdown() { // 获取专栏 id，注意 url 可能是 /category_数字.html 或 /category_数字_数字.html，需要第一个数字 const base_url = window.location.href; const category_id = base_url.match(/category_(\d+)(?:_\d+)?\.html/)[1]; let page = 1; const original_html = document.body.innerHTML; while (true) { // 获取当前页面的文章列表 const url_list = []; document.body .querySelector(".column_article_list") .querySelectorAll("a") .forEach((item) => { url_list.push(item.href); }); if (url_list.length === 0) { break; } // 下载每篇文章 for (const url of url_list) { await downloadArticle(url); } // 下一页 page++; const next_url = base_url.replace(/category_\d+(?:_\d+)?\.html/, `category_${category_id}_${page}.html`); const response = await fetch(next_url); const text = await response.text(); document.body.innerHTML = text; // 更新页面内容 } document.body.innerHTML = original_html; // 恢复原始页面内容 } /** * 主函数。点击下载按钮后执行。 * @returns {Promise } - 运行完成后的 Promise */ async function runMain() { // 检查是专栏还是文章 // 专栏的 url 里有 category // 文章的 url 里有 article/details const url = window.location.href; if (url.includes("category")) { // 专栏 await downloadCSDNCategoriesToMarkdown(); } else if (url.includes("article/details")) { // 文章 await downloadCSDNArticleToMarkdown(document.body); } else { alert("无法识别的页面。"); } } })();
- )。
* @param {Element} node - 列表元素。
* @param {number} listLevel - 当前列表嵌套级别。
* @param {boolean} ordered - 列表是否有序。
* @returns {string} - 列表的 Markdown 字符串。
*/
function processList(node, listLevel, ordered) {
let text = "";
const children = Array.from(node.children).filter((child) => child.tagName.toLowerCase() === "li");
text += "\n";
children.forEach((child, index) => {
let prefix = ordered ? `${" ".repeat(listLevel)}${index + 1}. ` : `${" ".repeat(listLevel)}- `;
text += `${prefix}${processChildren(child, listLevel + 1).trim()}\n`;
});
text += `\n`;
return text;
}
/**
* 处理表格。
* @param {Element} node - 包含表格的元素。
* @returns {string} - 表格的 Markdown 字符串。
*/
function processTable(node) {
const rows = Array.from(node.querySelectorAll("tr"));
if (rows.length === 0) return "";
let table = "";
// Process header
const headerCells = Array.from(rows[0].querySelectorAll("th, td"));
const headers = headerCells.map((cell) => processNode(cell).trim());
table += `| ${headers.join(" | ")} |\n`;
// Process separator
const alignments = headerCells.map((cell) => {
const align = cell.getAttribute("align");
if (align === "center") {
return ":---:";
} else if (align === "right") {
return "---:";
} else if (align === "left") {
return ":---";
} else {
return "---";
}
});
table += `|${alignments.join("|")}|\n`;
// Process body
for (let i = 1; i < rows.length; i++) {
const cells = Array.from(rows[i].querySelectorAll("td"));
const row = cells.map((cell) => processNode(cell).trim()).join(" | ");
table += `| ${row} |\n`;
}
return table;
}
/**
* 处理代码块。有两种代码块，一种是老版本的代码块，一种是新版本的代码块。
* @param {Element} node - 包含代码块的元素。一般是
元素。
* @returns {string} - 代码块的 Markdown 字符串。
*/
function processCodeBlock(codeNode) {
// 查找 code 内部是否有 ol 元素，这两个是老/新版本的代码块，需要分开处理
const node = codeNode.querySelector("ol");
// 确保传入的节点是一个 元素
if (!node || node.tagName.toLowerCase() !== "ol") {
// console.error('Invalid node: Expected an element.');
// return '';
// 如果没有 ol 元素，则说明是老版本，直接返回 codeNode 的 textContent
// return codeNode.textContent + '\n';
// 如果尾部有换行符，则去掉
return codeNode.textContent.replace(/\n$/, "") + "\n";
}
// 获取所有