cherry-markdown获取最纯净的HTML内容 返回
无念
教程
2025-05-01 21:25:46
41
代码如下:
/**
* 获取最纯净的HTML内容(最终修正版)
* @returns {string} 纯净HTML(保留代码高亮)
*/
function getPureHtml() {
const rawHtml = editor.getHtml();
const doc = new DOMParser().parseFromString(rawHtml, 'text/html');
// 1. 移除所有不需要的属性
doc.querySelectorAll('*').forEach(element => {
const tagName = element.tagName.toLowerCase();
// 特殊处理:保留代码块的language-类
if (tagName === 'code') {
// 查找并保留language-开头的class
const languageClass = Array.from(element.classList)
.find(cls => cls.startsWith('language-'));
element.className = languageClass || '';
return;
}
// 移除所有属性(保留必要的如img的src、a的href等)
Array.from(element.attributes).forEach(attr => {
if (!['src', 'alt', 'href', 'target'].includes(attr.name)) {
element.removeAttribute(attr.name);
}
});
// 特殊处理:移除a标签但保留文本和有效链接
if (tagName === 'a') {
const href = element.getAttribute('href');
const text = element.textContent;
if (href && !href.startsWith('#')) { // 保留有效链接
element.setAttribute('target', '_blank');
element.removeAttribute('class');
element.removeAttribute('style');
} else { // 移除锚点
element.replaceWith(document.createTextNode(text));
}
}
});
// 2. 移除div包裹但保留内容
doc.querySelectorAll('div').forEach(div => {
div.replaceWith(...Array.from(div.childNodes));
});
// 3. 处理代码块(保留高亮)
doc.querySelectorAll('pre').forEach(pre => {
pre.removeAttribute('style');
const code = pre.querySelector('code') || pre;
// 保留语言类(如"language-javascript")
const languageClass = Array.from(code.classList)
.find(cls => cls.startsWith('language-'));
// 创建干净的代码块
const cleanPre = document.createElement('pre');
const cleanCode = document.createElement('code');
// 保留语言类用于高亮
if (languageClass) {
cleanCode.className = languageClass;
}
// 安全设置内容(让浏览器自动转义)
cleanCode.textContent = code.textContent;
cleanPre.appendChild(cleanCode);
// 替换原始代码块
pre.replaceWith(cleanPre);
});
// 4. 处理图片
doc.querySelectorAll('img').forEach(img => {
['width', 'height', 'style', 'class'].forEach(attr => {
img.removeAttribute(attr);
});
});
// 5. 处理列表
doc.querySelectorAll('ul, ol, li').forEach(el => {
['style'].forEach(attr => el.removeAttribute(attr));
});
return doc.body.innerHTML;
}