如何用JavaScript解析Blogger RSS Feed并在HTML页面展示含图片内容？

当然可以用JavaScript来解析Blogger的RSS（通过JSON-P格式），你遇到的图片获取问题主要是因为Blogger的feed里图片可能存在两种不同的位置，我们可以通过增强逻辑来覆盖这两种情况：

问题分析 #

你当前的代码尝试直接访问json.feed.entry[i].media$thumbnail.url，但这个字段只有当文章设置了特色图片时才会存在。如果文章里的图片是插入正文中的，这个字段就会缺失，这时候我们需要从文章的摘要或内容HTML中提取图片链接。

修改后的代码 #

下面是更新后的代码，新增了图片提取的逻辑，同时做了一些鲁棒性优化：

function extractPostImage(entry) {
    // 优先尝试获取特色图片（media$thumbnail）
    if (entry.media$thumbnail && entry.media$thumbnail.url) {
        return entry.media$thumbnail.url;
    }
    
    // 如果没有特色图片，从摘要HTML中提取第一张图片的src
    const summaryHtml = entry.summary.$t;
    const imgRegex = /<img[^>]+src="([^">]+)"/i;
    const match = summaryHtml.match(imgRegex);
    
    if (match && match[1]) {
        return match[1];
    }
    
    // 如果摘要里也没有，尝试从正文内容提取（如果feed包含content的话）
    if (entry.content && entry.content.$t) {
        const contentMatch = entry.content.$t.match(imgRegex);
        return contentMatch ? contentMatch[1] : 'https://via.placeholder.com/300x200?text=No+Image';
    }
    
    // 兜底：返回占位图
    return 'https://via.placeholder.com/300x200?text=No+Image';
}

function mycallback(json) {
    // 避免使用document.write，改用DOM拼接（更推荐）
    const container = document.createElement('div');
    
    for (var i = 0; i < json.feed.entry.length; i++) {
        const entry = json.feed.entry[i];
        
        // 获取文章链接
        let postUrl = '';
        for (var j = 0; j < entry.link.length; j++) {
            if (entry.link[j].rel == 'alternate') {
                postUrl = entry.link[j].href;
                break;
            }
        }
        
        // 获取图片（调用上面的提取函数）
        const postImage = extractPostImage(entry);
        
        // 获取其他字段
        const postTitle = entry.title.$t;
        const postAuthor = entry.author[0].name.$t;
        const postSummary = entry.summary.$t;
        
        // 截断摘要（处理截断到单词末尾的逻辑）
        let postContent = postSummary.substring(0, 400);
        const entryEnd = postContent.lastIndexOf(" ");
        if (entryEnd !== -1) {
            postContent = postContent.substring(0, entryEnd) + '...';
        }
        
        // 创建文章项DOM
        const item = document.createElement('div');
        item.className = 'wrapper';
        item.innerHTML = `
            <img src="${postImage}" alt="${postTitle}">
            <h3><a href="${postUrl}" target="_blank">${postTitle}</a></h3>
            <span>${postAuthor}</span>
            <p>${postContent}</p>
        `;
        
        container.appendChild(item);
    }
    
    // 将所有文章项插入到页面中（建议提前在HTML里加一个id为"blog-feed"的容器）
    const feedContainer = document.getElementById('blog-feed') || document.body;
    feedContainer.appendChild(container);
}

引入Feed的script标签保持不变：

<script src="https://www.universalmanual.com/feeds/posts/summary?orderby=published&max-results=500&alt=json-in-script&callback=mycallback"></script>

关键改进点 #

• 新增了extractPostImage函数，分优先级获取图片：
  1. 优先取Blogger的特色图片（media$thumbnail）
  2. 如果没有，从文章摘要的HTML中提取第一张图片的src
  3. 如果摘要也没有，尝试从正文内容提取（若要获取完整正文，可将Feed链接中的summary替换为default）
  4. 最后兜底返回占位图，避免页面出现破损图片
• 替换了document.write为DOM元素创建和拼接，这是更现代、更安全的做法，不会出现覆盖页面内容的问题
• 给图片添加了alt属性，提升页面可访问性
• 给文章链接添加了target="_blank"（可根据需求自行调整）

额外提示 #

如果你需要获取更高分辨率的图片，media$thumbnail的URL通常可以修改尺寸参数：比如把链接中的/s72-c/改成/s1600/，就能获取原图大小（注意平衡图片加载性能）。

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