如何使用Wikipedia API获取维基百科信息框指定内容并解决图片加载错误

实现思路 #

针对你遇到的两个问题，对应解决逻辑如下：

• 筛选水平线下方内容：维基百科信息框内的分界线为<hr>标签，定位到该标签后调用nextAll()方法即可获取该标签之后所有的同级元素，正好对应你需要的从disease: Covid-19到Vaccinations的区间内容。
• 解决图片加载报错：维基返回的HTML中图片路径为站内相对路径，未携带维基域名前缀，在你的站点下加载自然会找不到资源。直接提前移除信息框内所有<img>标签即可从根源避免报错和alt文本显示的问题。

可直接使用的修改后代码 #

let area = "Canada"
// 替换为HTTPS协议，避免部分浏览器拦截HTTP跨站请求
var url="https://en.wikipedia.org/w/api.php?action=parse&format=json&page=COVID-19_pandemic_in_"+area +"&redirects&prop=text&callback=?";
$.getJSON(url,function(data){
    const wikiHTML = data.parse.text["*"];
    const $wikiDOM = $("<document>"+wikiHTML+"</document>");
    // 定位信息框节点
    const $infobox = $wikiDOM.find('.infobox');
    // 移除所有图片元素
    $infobox.find('img').remove();
    // 定位第一个水平线标签，获取其后所有内容
    const $targetNodes = $infobox.find('hr').first().nextAll();
    // 如需将内容拼接为完整HTML字符串，使用以下方法
    const targetHTML = $targetNodes.map(function() {
        return this.outerHTML;
    }).get().join('');
    console.log(targetHTML);
})

补充说明 #

如果信息框内存在多条水平线，你可以替换hr.first()为更精准的筛选逻辑，比如根据相邻节点的文本内容匹配你需要的分界hr即可。

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