Skip to content

Instantly share code, notes, and snippets.

@DylanPiercey
Created July 20, 2023 17:25
Show Gist options
  • Save DylanPiercey/def424d3add00efa020b48e4b27e698c to your computer and use it in GitHub Desktop.
Save DylanPiercey/def424d3add00efa020b48e4b27e698c to your computer and use it in GitHub Desktop.
Switch casing
(() => {
let activeMode = "default";
const modes = {
default: (_) => _,
camel: (_, c) => c.toUpperCase(),
snake: (_, c) => `_${c}`,
kebab: (_, c) => `-${c}`,
smoosh: (_, c) => c.toLowerCase(),
};
const root = document.createElement("div");
root.setAttribute(
"style",
`position: fixed; top: 0; left: 0; z-index: 9999;`
);
for (const mode in modes) {
const btn = document.createElement("button");
btn.onclick = () => {
activeMode = mode;
replaceText();
};
btn.textContent = mode;
root.appendChild(btn);
}
document.body.appendChild(root);
const observer = new MutationObserver(replaceText);
function replaceText() {
observer.disconnect();
const walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_TEXT
);
while (walker.nextNode()) {
walker.currentNode.data = (walker.currentNode.__data__ ||=
walker.currentNode.data).replace(
/(?<=[a-z])[ ]+([a-z])/gi,
modes[activeMode]
);
}
observer.observe(document.body, {
subtree: true,
childList: true,
characterData: true,
});
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment