Question

I’m using the Wikipedia API to fetch just the first para of an article for which a keyword has been provided.

I have to extract formatted text from the JSON response but suppress some of the unwanted info like the sidebar (which is in a table & has the class name infobox) before I show it in a div whose id is wiki –

$.getJSON("http://en.wikipedia.org/w/api.php?" +
            "action=mobileview&format=json&page=" +
            keyword + "&redirect=no&sections=0&prop=text&" +
            "sectionprop=toclevel%7Clevel%7Cline%7Cnumber" +
            "%7Cindex%7Cfromtitle%7Canchor&callback=?",
          function(json) { 
                    $('#wiki').html(json.mobileview.sections[0].text)
                              .find("dl,sup,.thumb,table.infobox,table.metadata")
                              .remove().end(); 
          }
);

I’ve adapted the jQuery trick to remove tags/selectors from the JSON response containing the HTML code of the requested Wikipedia page. I want to use the above snippet in a Windows 8 Store app written in HTML/JS. I wish to convert the following line to native JavaScript and implement the selector removal code without using jQuery –

$('#wiki').html(json.mobileview.sections[0].text)
           .find("dl,sup,.thumb,table.infobox,table.metadata")
           .remove().end(); 

I’m a JavaScript newbie. Can anyone please convert this line to plain-vanilla JavaScript?

Answer 1

var wiki = document.querySelector('#wiki');
wiki.innerHTML = json.mobileview.sections[0].text;

var content = wiki.querySelectorAll("dl,sup,.thumb,table.infobox,table.metadata");

for (var i = 0; i < content.length; i++) {
    if (content[i].nodeName.toUpperCase() === "A")
        content[i].parentNode.insertBefore(content[i].firstChild, content[i]);

    content[i].parentNode.removeChild(content[i]);
}

This will work in most browsers including IE8 and higher.