使用DOMParser解析RSS时CDATA内容未渲染的正确处理方法

你遇到的问题是因为用innerHTML获取XML元素内容时，DOMParser解析后的CDATA块会被当作独立的CDATASection节点，innerHTML不会提取这类节点的文本。除了字符串替换CDATA标签，有两种更规范的处理方式：

1. 使用textContent替代innerHTML #

textContent会自动合并元素下所有文本类节点（包括CDATA）的内容，无需额外处理。修改原代码中获取内容的部分即可：

function feed_fetch(){
    const div = document.getElementById('feed');
    div.innerHTML = "";
    const url = "https://some-rss-url";
    fetch(url)
        .then(response => response.text())
        .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
        .then(data => {
            const items = data.querySelectorAll("item");
            items.forEach(item => {
                // 用textContent获取包含CDATA的完整文本
                const link = item.querySelector("link").textContent;
                const title = item.querySelector("title").textContent;
                const html = `
                    <article>
                    <h3>
                        <a href="${link}" target="_blank" rel="noopener">
                        ${title}
                        </a>
                    </h3>
                    </article>
                `;
                div.innerHTML += html;
            })
        });
}

2. 精准提取CDATA节点内容 #

如果需要单独处理CDATA（比如区分普通文本和CDATA内容），可以遍历元素的子节点，筛选出类型为CDATASection（节点类型值为4）的节点，直接获取其内容：

// 封装获取CDATA内容的工具函数
function getCDATAContent(element) {
    for (const node of element.childNodes) {
        if (node.nodeType === 4) {
            return node.nodeValue;
        }
    }
    // 无CDATA时返回普通文本
    return element.textContent;
}

// 修改原代码中的内容获取逻辑
function feed_fetch(){
    const div = document.getElementById('feed');
    div.innerHTML = "";
    const url = "https://some-rss-url";
    fetch(url)
        .then(response => response.text())
        .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
        .then(data => {
            const items = data.querySelectorAll("item");
            items.forEach(item => {
                const link = getCDATAContent(item.querySelector("link"));
                const title = getCDATAContent(item.querySelector("title"));
                const html = `
                    <article>
                    <h3>
                        <a href="${link}" target="_blank" rel="noopener">
                        ${title}
                        </a>
                    </h3>
                    </article>
                `;
                div.innerHTML += html;
            })
        });
}

这两种方式都是利用XML DOM的原生API处理CDATA，比字符串替换更可靠，能避免因CDATA标签格式变化导致的解析错误。

内容的提问来源于stack exchange，提问作者Nathan H