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;
}