Userscripts.org

Wikipedia has a shitty HTML layout.

Anyone know how I can access specific sections? I wish to make a script that collapses Plot/Summary/Synopsis sections by default, to avoid spoiling myself (and others). Wikipedia uses non-wrapped sections, tables, and the sections themselves are a bunch of <p>aragraphs without parents, followed by the next section's title <span>. In other words, the HTML is ugly and pretty unmanageable for a userscript author.

Edit: Nothing other than the <span>s have IDs or classes attributes given.

Any help would be wildly appreciated.

I only tried this on a few pages so I'm sure it will need debugging... Basically it looks for h2 elements and assumes those are headers of sections. It creates an inner wrapper for the content up to the next h2, and an outer wrapper containing the h2 and the inner wrapper. Adding code to initially hide, and controls to show, the content would be a logical next step.

Note that the last chunk of content is not wrapped because I wasn't sure about an accurate way to identify a stopping point.

var h2s = document.querySelectorAll("#mw-content-text > h2");
if (h2s.length > 0){
  var i, dOuter, dInner;
  for (i=0; i<h2s.length-1; i++){
    dOuter = document.createElement("div");
    dOuter.id = "content_outer_" + i;
    dOuter.className = "content_outer";
    // dOuter.style.border = "1px dotted green"; // debug only
    dInner = document.createElement("div");
    dInner.id = "content_inner_" + i;
    dInner.className = "content_inner";
    // dInner.style.border = "1px solid blue"; // debug only
    h2s[i].parentNode.insertBefore(dOuter, h2s[i]);
    dOuter.appendChild(h2s[i]);
    dOuter.appendChild(dInner);
    while (dOuter.nextSibling && dOuter.nextSibling.nodeName != "H2"){
      dInner.appendChild(dOuter.nextSibling);
    }
  } 
}

Adding subsections (headed by H3 elements):

var h2s = document.querySelectorAll("#mw-content-text > h2");
if (h2s.length > 0){
  var i, dOuter, dInner;
  for (i=0; i<h2s.length-1; i++){
    dOuter = document.createElement("div");
    dOuter.id = "content_outer_" + i;
    dOuter.className = "content_outer";
    dInner = document.createElement("div");
    dInner.id = "content_inner_" + i;
    dInner.className = "content_inner";
    h2s[i].parentNode.insertBefore(dOuter, h2s[i]);
    dOuter.appendChild(h2s[i]);
    dOuter.appendChild(dInner);
    while (dOuter.nextSibling && dOuter.nextSibling.nodeName != "H2"){
      dInner.appendChild(dOuter.nextSibling);
    }
  } 
}

var h3s = document.querySelectorAll(".content_inner > h3");
if (h3s.length > 0){
  var j;
  for (i=0; i<h3s.length; i++){
    j = h3s[i].parentNode.id.substr(h3s[i].parentNode.id.lastIndexOf("_")+1);
    dOuter = document.createElement("div");
    dOuter.id = "content_sub_outer_" + j + "_" + i;
    dOuter.className = "content_sub_outer";
    dInner = document.createElement("div");
    dInner.id = "content_sub_inner_" + j + "_" + i;
    dInner.className = "content_sub_inner";
    h3s[i].parentNode.insertBefore(dOuter, h3s[i]);
    dOuter.appendChild(h3s[i]);
    dOuter.appendChild(dInner);
    while (dOuter.nextSibling && dOuter.nextSibling.nodeName != "H3"){
      dInner.appendChild(dOuter.nextSibling);
    }
  } 
}

Edited at 9:05AM Pacific time.