Last active
October 15, 2021 10:33
-
-
Save matteoferla/3b82c810c432a66364c95df20e1751d0 to your computer and use it in GitHub Desktop.
Given a webpage requiring a low res screenshot, replace words with ■. Handy for making screenshots where words do not matter (see below for details)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 ■.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The JS console in a browser can be found by right clicking in the viewport, selecting
Inspect
or somesuch and then pressing the tabConsole
. In FireFox it will ask you to type allow pasting if never accessed before. In which case after typing that, please also paste the following: