Write jQuery statement in plain JavaScript

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?

I Hate Lazy · Accepted Answer · 2012-11-08 17:56:56Z

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.

edited Nov 8, 2012 at 17:56

answered Nov 7, 2012 at 17:24

I Hate Lazy

49k13 gold badges89 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mvp Over a year ago

thanks! that was very helpful. i also don't need to show hyperlinks within that content but retain the hyperlink text. I've looked at some samples here - stackoverflow.com/questions/4536329/… but could not adapt it for my requirement. How to remove anchor tags (but retain text) from the content by extending the same code?

I Hate Lazy Over a year ago

@mvp: Assuming the anchors only have text and no nested elements, you can use the code in my updated answer. If the anchors are not part of the current DOM selection, add ,a to the end of the selector, or ,a[href] if you only want ones with an href attribute.

Collectives™ on Stack Overflow

Write jQuery statement in plain JavaScript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related