JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div>Type a word to see a list of common anagrams</div>
  <input id="input" autocomplete="off" />
  <div id="output"></div>
</body>
</html>

JavaScript

const dictionaryURL = 'https://gist.githubusercontent.com/dlants/d3b25b0f6c0bf8d023f65e86498bf9e6/raw/b310b5aff00f62f5073b3b8d366f5a639aa88ee3/3000-words.txt';

(async function() {
  const dictionary = await fetch(dictionaryURL).then(
    async (res) => {
      const text = await res.text()
      return text.split('\n')
    }
  );
  
  const input = document.querySelector('#input')
  const output = document.querySelector('#output')
  
  input.addEventListener('input', function() {
    if (!dictionary) return;

    const word = input.value

    const normalize = str => {
      const regex = /\S/g;
      return str.toLowerCase()
        .split("")
        .filter(ch => ch.match(regex))
        .sort()
        .join("");
    }

    const foundWords = dictionary.filter(word2 => {
      return normalize(word) === normalize(word2)
    })

    output.innerHTML = JSON.stringify(foundWords, null, 2)
  })
})()