Given a webpage requiring a low res screenshot, replace words with ■. Handy for making screenshots where words do not matter (see below for details)

blanker.js

function blanker(node) {
  //vanilla JS. Change the following as desired:
  const blankBlock = '■'; //'▬'
  const unblankableTags = ['H1', 'H2', 'H3', 'H4', 'H5'];
  const unblankableClasses = ['font-weight-bold'];
  // cases:
  if (unblankableTags.includes(node.tagName)) {
     //pass
  } else if (node.classList && unblankableClasses.some(c => node.classList.contains(c))) {
     //pass
  } else if (node.childNodes.length !== 0) {
      const inners = (new Array(...node.childNodes)).map(blanker);
  }
  else if (node.value !== undefined) {
      node.value = node.value.replace(/\S{2}/g, '*').replace(/[^\s\*]/g, '');
  }
  else if (node.textContent !== undefined) {
      node.textContent = node.textContent.replace(/\S{3}/g, blankBlock).replace(/[^\s■▬]/g, '');
  }
  else {node.innerText = node.innerText.replace(/\S{3}/g, blankBlock).replace(/[^\s■▬]/g, '');
      return node.outerHTML;
  }
}
// Go!
blanker(document.body)

To leave somethings alone, before pressing enter on the copy-paste (i.e. executing the code), you add the type of tag to unblankableTags (e.g. button) or add their class to unblankableClasses. The '■' in the blankBlock variable to whatever — '▬' gives a continuous line. To see what the tag or class may be right click on it > inspect option > element tab, e.g. <div class="foo">bar</div> is a div tag of class foo. Do note that the exception covers its children. The /\S{3}/g line controls how many spaces make a ■.