JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<a href="http://commons.wikimedia.org/w/api.php?action=query&generator=search&gsrnamespace=6&gsrsearch=%22Virginia+Woolf%22&gsrlimit=3&gsroffset=1&prop=imageinfo&iiprop=url&format=json" target="_blank">Wikimedia Query</a>

<a href="http://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=0&page=Virginia+Woolf&callback=?" target="_blank">Wikipedia Query</a>

JavaScript

$('body').append('<div id="images"></div>');
$('body').append('<div id="article"></div>');
var wikiQuery = "Virginia+Woolf";
$.ajax({
    type: "GET",
    url: "http://commons.wikimedia.org/w/api.php?action=query&generator=search&gsrnamespace=6&gsrsearch=%22" + wikiQuery + "%22&gsrlimit=3&gsroffset=1&prop=imageinfo&iiprop=url&format=json",
    contentType: "application/json; charset=utf-8",
    async: false,
    dataType: "jsonp",
    success: function (data, textStatus, jqXHR) {

        var wikicommonsMarkup = data.query.searchinfo.pages;
        
        $('#images').html(wikicommonsMarkup);

    },
    error: function (errorMessage) {
        $('#images').text('No images');
    }
});
$.ajax({
    type: "GET",
    url: "http://sv.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=0&page=" + wikiQuery + "&callback=?",
    contentType: "application/json; charset=utf-8",
    async: false,
    dataType: "jsonp",
    success: function (data, textStatus, jqXHR) {

        var wikipediaMarkup = data.parse.text["*"];
        var blurb = $('<div></div>').html(wikipediaMarkup);

        // remove links
        blurb.find('a').each(function () {
            $(this).replaceWith($(this).html());
        });

        // add img
        $('#images').prepend(blurb.find('img').eq(0));
        
        // remove any references
        blurb.find('sup').remove();

        // remove any images
        blurb.find('img').remove();
        
        // remove any listen buttons
        blurb.find('.nowrap').remove();
        blurb.find('.haudio').remove();
        blurb.find('.metadata').remove();

        // remove cite error
        blurb.find('.mw-ext-cite-error').remove();
        $('#article').html($(blurb).find('p'));

    },
    error: function (errorMessage) {
        $('#article').text('No article');
    }
});