javascript - 使用 ajax 渲染来自 wikipedia api 的图像

Question

我正在尝试渲染维基百科文章的图像。

例如来自https://de.wikipedia.org/wiki/Appendizitis

为了避免跨域策略，我使用代理:

function imageWp() {

var word = 'Appendizitis';

$.ajaxPrefilter( function (options) {
  if (options.crossDomain && jQuery.support.cors) {
    var https = (window.location.protocol === 'http:' ? 'http:' : 'https:');
    options.url = https + '//cors-anywhere.herokuapp.com/' + options.url;
  }
});

$.get(
    'https://de.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=0&page=' + word + '&callback=?',
    function (response) {
        console.log("> ", response);
        $("#viewer").html(response);
});
}

我怎样才能只解析图像？ 或者，有没有更好的方法使用 javascript、jquery 和 ajax？我不想使用 PHP。

Answer 1

function imageWp() {

    var word = 'Appendizitis';

    $.ajaxPrefilter(function (options) {
        if (options.crossDomain && jQuery.support.cors) {
            var https = (window.location.protocol === 'http:' ? 'http:' : 'https:');
            options.url = https + '//cors-anywhere.herokuapp.com/' + options.url;
        }
    });

    $.get(
        'https://de.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=0&page=' + word + '&callback=?',

    function (response) {
        var m;
        var urls = [];
        var regex = /<img.*?src=\\"(.*?)\\"/gmi;

        while (m = regex.exec(response)) {
            urls.push(m[1]);
        }

        urls.forEach(function (url) {
            $("#viewer").append('<img src="' + window.location.protocol + url + '">');
        });
    });
}

imageWp();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewer"></div>