#javascript

Simple text blur bookmarklet

Ever need to blur out some text on website for screenshot?

Simple blurring using image editor can be time consuming and can also be reversed.

That is why I made this simple piece of JavaScript that can be used as bookmarklet that allows to you blur selected part of page and replace text with anonimized characters.

To use it, trigger bookmarklet and while holding Ctrl key, hovered part will be outlined. On mouse click, outlined part is blurred and all text inside converted.

We use X to replace uppercase letters, x to replace lowercase and 0 to replace numbers.

(function () {
  document.addEventListener("mouseover", (e) => {
    if (!e.ctrlKey) {
      return;
    }
    if (
      !e.target ||
      e.target.nodeName === "BODY" ||
      e.target.nodeName === "HTML"
    ) {
      return;
    }
    e.target.style.outline = "solid 2px #ff7b72";
  });
  document.addEventListener("mouseout", (e) => {
    e.target.style.outline = null;
  });
  document.addEventListener(
    "click",
    (e) => {
      if (!e.ctrlKey) {
        return;
      }
      e.preventDefault();
      e.stopImmediatePropagation();
      if (
        !e.target ||
        e.target.nodeName === "BODY" ||
        e.target.nodeName === "HTML"
      ) {
        return;
      }

      e.target.style.filter = "blur(4px)";

      let n;
      const walk = document.createTreeWalker(
        e.target,
        NodeFilter.SHOW_TEXT,
        null,
        false
      );
      while ((n = walk.nextNode())) {
        n.textContent = n.textContent
          .replace(/[A-Z]/g, "X")
          .replace(/[a-z]/g, "x")
          .replace(/[0-9]/g, "0");
      }
    },
    true
  );
})();

You can find bookmarklet version here:

Blur