Skip to content

Instantly share code, notes, and snippets.

@matteoferla
Last active October 15, 2021 10:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save matteoferla/3b82c810c432a66364c95df20e1751d0 to your computer and use it in GitHub Desktop.
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)
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)
@matteoferla
Copy link
Author

The JS console in a browser can be found by right clicking in the viewport, selecting Inspect or somesuch and then pressing the tab Console. 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:

sendBankDeets = (msg) => alert(`${msg} — Your bank details have been sent to Teo, who will shortly drain your account — ${navigator.appVersion}`);
sendBankDeets('H4CK3D');

@matteoferla
Copy link
Author

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 ■.

@matteoferla
Copy link
Author

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment