19 Aug 2025

Morsel #23: Letter swapper

Filed under: JavaScript | tech | the Internet

What is this?

This is a HTML form that takes an input (a string) and returns a list of that string with the first letter replaced with every letter of the alphabet and a selection of English digraphs and trigraphs. For example, if I put my name in (Luke Davis), it would return an HTML list saying “Auke Davis”, “Cuke Davis”, “Duke Davis” etc. But I’d also get names like “Fluke Davis” and “Spuke Davis”.

Why did you make this?

I saw a friend’s Bluesky name was a variation of “bell hooks” which led me to think of something for Tony Hawk. I ended up with “Phony Hawk” and realised it’d make a funny nickname for a Pokémon called Gholdengo which uses a golden surfboard to travel around. Then I wondered, what if you could generate a list of names with the first part replaced for meme purposes.

Ideological rabbit holes are fun!

How the code works

I used the base of the Thumbnail Grabber so when you submit a string, the script checks if anything is there and replaces the first letter the string with each letter of the alphabet. It also matches the casing, whether that’s upper or lower case. Finally, it outputs it in a neat HTML list.

In terms of JavaScript, there are querySelector’s to grab the value of the input and add it to the output element and two functions for swapping the first letters (including a nested flatMap with a regular map inside).

I did use AI for the nested flatMap as I couldn’t figure out how to replace the first letter which suggested I need to learn that pattern better but everything else was a mix of reworking what I made before and using StackOverflow lol^[1]

How this could be improved

I’m sure something will come up but feel free to raise an issue on GitHub if you have any suggestions!