slop detector userscript

highlight-emdashes.user.js

// ==UserScript==
// @name         Highlight Em Dashes
// @namespace    https://imjonas.nl/
// @version      1.0
// @description  Highlights every em dash on every page
// @match        *://*/*
// @run-at       document-end
// ==/UserScript==

(() => {
  const HIGHLIGHT_CLASS = "emdash-highlight";

  const style = document.createElement("style");
  style.textContent = `
    .${HIGHLIGHT_CLASS} {
      background: yellow;
      color: black;
      border-radius: 2px;
      padding: 0 2px;
      font-weight: bold;
    }
  `;
  document.head.appendChild(style);

  function highlightEmDashes(root = document.body) {
    const walker = document.createTreeWalker(
      root,
      NodeFilter.SHOW_TEXT,
      {
        acceptNode(node) {
          if (!node.nodeValue.includes("—")) return NodeFilter.FILTER_REJECT;

          const parent = node.parentElement;
          if (!parent) return NodeFilter.FILTER_REJECT;

          const ignoredTags = ["SCRIPT", "STYLE", "TEXTAREA", "INPUT"];
          if (ignoredTags.includes(parent.tagName)) {
            return NodeFilter.FILTER_REJECT;
          }

          if (parent.closest(`.${HIGHLIGHT_CLASS}`)) {
            return NodeFilter.FILTER_REJECT;
          }

          return NodeFilter.FILTER_ACCEPT;
        }
      }
    );

    const nodes = [];
    while (walker.nextNode()) {
      nodes.push(walker.currentNode);
    }

    for (const node of nodes) {
      const fragment = document.createDocumentFragment();

      for (const part of node.nodeValue.split("—")) {
        fragment.append(document.createTextNode(part));

        const span = document.createElement("span");
        span.className = HIGHLIGHT_CLASS;
        span.textContent = "—";
        fragment.append(span);
      }

      fragment.lastChild?.remove();
      node.replaceWith(fragment);
    }
  }

  highlightEmDashes();

  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      for (const node of mutation.addedNodes) {
        if (node.nodeType === Node.TEXT_NODE) {
          highlightEmDashes(node.parentElement);
        } else if (node.nodeType === Node.ELEMENT_NODE) {
          highlightEmDashes(node);
        }
      }
    }
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
})();