JavaScript Snippet – Robtex.com Sorted Lists

This nice little code, walks-through the lists on the page,
sort them and rewrite them as plain-text,
making them somewhat more easier to browse, and select/copy content.

icompile.eladkarako.com_robtex_before

icompile.eladkarako.com_robtex_work_in_progress

icompile.eladkarako.com_robtex_work_in_progress_parallel

icompile.eladkarako.com_robtex_done_plus_selection

javascript:(function (body,style,style_text){
    NodeList.prototype.forEach = Array.prototype.forEach;
    NodeList.prototype.map = Array.prototype.map;

    style.appendChild(style_text);
    body.appendChild(style);
    
    document.querySelectorAll("ol").forEach(function(ol){
      ol.setAttribute('state','work');

      /* use element as an object, storing data as variable, while clearing the DOM related data. */
      ol.lis = ol.querySelectorAll("li")
                 .map(function(li){ return li.innerText.toLowerCase() })
                 .sort()
                 ;
      ol.lis = "<li>" + ol.lis.join("</li><li>") + "</li>";

      ol.innerHTML = "";

      setTimeout(function(){
        ol.setAttribute("contentEditable", "true"); /* to support [CTRL]+[A] */
        ol.innerHTML = ol.lis;
        ol.setAttribute('state','done');
      }, 50);
    });
}(
  document.querySelector("body")
, document.createElement("style")
, document.createTextNode('/*<![CDATA[*/'
                        + 'ol[state="work"]:before{content:"working..."; font-size:20pt;}'
                        + 'ol[state="work"]{background:none rgba(255,127,137,.6); color:rgba(0,0,0,.1);}'
                        + 'ol[state="done"]{background:none rgba(147,255,72,.1); font-size: 12pt; letter-spacing:.5pt; line-height:16pt;}'
                        + 'ol[state="done"] li{font-family: "Courier New", monospace;}'
                        + '/*]]>*/')
));

and a bookmarklet version:

javascript:(function(body,style,style_text){NodeList.prototype.forEach=Array.prototype.forEach;NodeList.prototype.map=Array.prototype.map;style.appendChild(style_text);body.appendChild(style);document.querySelectorAll("ol").forEach(function(ol){ol.setAttribute("state","work");ol.lis=ol.querySelectorAll("li").map(function(li){return li.innerText.toLowerCase();}).sort();ol.lis="<li>"+ol.lis.join("</li><li>")+"</li>";ol.innerHTML="";setTimeout(function(){ol.setAttribute("contentEditable","true");ol.innerHTML=ol.lis;ol.setAttribute("state","done")},50)})})(document.querySelector("body"),document.createElement("style"),document.createTextNode('/*<![CDATA[*/ol[state="work"]:before{content:"working...";font-size:20pt;}ol[state="work"]{background:none rgba(255,127,137,.6);color:rgba(0,0,0,.1);}ol[state="done"]{background:none rgba(147,255,72,.1);font-size:12pt;letter-spacing:.5pt;line-height:16pt;}ol[state="done"] li{font-family:"Courier New",monospace;}/*]]>*/'));