JSFiddle - React, Tailwind, and code Playground

by Michaël van de Weerd

HTML

<input id="word" type="text" placeholder="Enter replacement word" value="Airblade">
<textarea id="titles">
The 400 Blows
La Haine
The Godfather
The Godfather: Part II
Man Bites Dog
The Departed
Umberto D.
White Heat
Eddie Murphy: Raw
All Quiet on the Western Front
Duck Soup
Mafioso
Stalag 17
The Shawshank Redemption
The Dark Knight
Fight Club
Batman Begins
The Big Lebowski
Snatch.
The Good, the Bad and the Ugly
Gladiator
Saving Private Ryan
Amélie
American History X
In Bruges
Crash
Big Fish
Seven Samurai
Layer Cake
Coming to America
O Brother, Where Art Thou?
Friday
Donnie Brasco
Raging Bull
Ed Wood
Primal Fear
Half Baked
Field of Dreams
Analyze This
Mean Streets
The Dirty Dozen
The Longest Day
Combat de boxe
The Errand Boy
The Bellboy
Six Shooter
CKY2K
The Dark Hours
Edmond
Let Him Have It
Johnny Mad Dog
The Public Enemy
American Splendor
The Football Factory
The Taking of Pelham One Two Three
Small Time Crooks
The Business
Belly
Rango
Transformers
Limitless
Pulp Fiction
Star Trek
The Town
300
Heat
Schindler's List
The Matrix
Goodfellas
The Usual Suspects
Up
Ferris Bueller's Day Off
Ip Man
Mean Girls
American Pie
Casino Royale
Back to the Future
Pan's Labyrinth
Dumb & Dumber
Braveheart
Moon
Knocked Up
Lock, Stock and Two Smoking Barrels
Old School
Trainspotting
Slumdog Millionaire
Casablanca
Catch Me If You Can
The Bourne Identity
Ip Man 2
The Boondock Saints
Blow
The Fast and the Furious: Tokyo Drift
Blood Diamond
The Game
Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb
Four Lions
3:10 to Yuma
The Bourne Supremacy
Ghostbusters
Groundhog Day
Wet Hot American Summer
1408
The Last Samurai
Bad Boys
The Aviator
Being John Malkovich
Aladdin
Lord of War
Apollo 13
Amadeus
Stranger Than Fiction
The Simpsons Movie
Shoot 'Em Up
The Last King of Scotland
Dances with Wolves
Big
A Prophet
The Great Escape
Vantage Point
Three Kings
Hero
Dog Day Afternoon
Beverly Hills Cop
Unknown
We Own the Night
Empire of the Sun
Rounders
A Bronx Tale
Boy A
The...

CSS

* {
  margin: none;
  padding: none;
  box-sizing: border-box;
}

#word {
  width: 100%;
  padding: 8px;
  margin-bottom: 8px;
}

#titles {
  height: 500px;
  width: 100%;
  resize: none;
  margin-bottom: 4px;
}

JavaScript

function airblade() {
  var word = document.getElementById("word").value;
  var titles = document.getElementById("titles").innerHTML.split("\n");

  for (var i = 0; i < titles.length; i++) {
    titles[i] = replaceLargestWord(titles[i], word);
  }

  document.getElementById("titles").innerHTML = titles.join("\n");
}

function replaceLargestWord(sentence, word) {
  var words = sentence.split(" ");
  var largestWord;

  for (var i = 0; i < words.length; i++) {
    if (largestWord == null || words[i].length > largestWord.length) {
      largestWord = {
        word: words[i],
        length: words[i].length,
        index: i
      };
    }
  }

  words[largestWord.index] = word;

  return words.join(" ");
}