JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo">#test span ul a
#test >span[style="background:green"]
#id + span ~ article.class
section header.class
body
div
body div
div p
div > p
div ~ p
div[class^=exa][class$=mple]
div p a
.note
div.example
ul .tocline2
#title                                  
h1#title
div #title                                      
ul.toc li.tocline2
ul.toc > li.tocline2
a[href][lang][class]
div[class]
div[class=example]
div[class^=exa]
div[class$=mple]
div[class*=e]
div[class|=dialog]
div[class!=made_up]
    div[class~=example]</div>

JavaScript

var list = $("#foo").text().split("\n");

var table = $('<table></table>');
$("#foo").empty().append(table);
for(var i = 0; i < list.length; i++) {
    var str = list[i];
    str = str.replace(/\[[^\]]+\]/g, '');
    str = str.replace(/[\.#][a-z0-9]+/g, '');
    str = str.replace(/^.*[^a-zA-Z0-9]/, '');
    table.append('<tr><td>' + list[i] + '</td><td>' + str + '</td></tr>');
}