JSFiddle - React, Tailwind, and code Playground

HTML

<noscript>this should not be included</noscript>
<table><tr><td>a<td>b<tr><td>c<td>d</table>   
e
<div>f<p style="display:none">g<span>h<em>i</em></span></p></div>
jklm
<b>nopq</b>
<ul><li>can't see me</li></ul>
rstuvwxyz
<div><div>blue on blue</div></div>
<div><div style="color:red">red on blue</div></div>

CSS

b {
  visibility: hidden;
}
ul {
  opacity: 0;
}
div > div {
  color: blue;
  background: blue;
}

JavaScript

console.clear();

function traverse(o) {
  var a = [];
  [].forEach.call(o.childNodes, function(val) {
    if(val.nodeType===3) {
      if(val.nodeValue.trim()>'') a.push(val);
    }
    else {
      var style= getComputedStyle(val);
      if(val.tagName!=='NOSCRIPT' && 
         style.getPropertyValue('display')!=='none' &&
         style.getPropertyValue('visibility')!=='hidden' &&
         style.getPropertyValue('opacity')!=='0' &&
         style.getPropertyValue('color')!==style.getPropertyValue('background-color')
        ) {
        a= a.concat(traverse(val));
      }
    }
  });
  return a;
} //traverse

var textNodes= traverse(document.body);

textNodes.forEach(function(val) {
  console.log(val.nodeValue.trim());
});