JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<input type="text" id="search">
<div id="output"></div>

CSS

#output {
  font-size: 24px;
  color: #666;
}
#output .middle {
  font-weight: bold;
  color: #000;
}

JavaScript

const search = document.querySelector("#search");
const output = document.querySelector("#output");

search.addEventListener("keyup", performSearch);


function performSearch() {
	const userInput = this.value;
  
  const matchedWord = "Hejsan";

  const index = matchedWord.toLowerCase().indexOf(userInput);

  const before = matchedWord.substr(0, index);
  const middle = matchedWord.substr(index, userInput.length);
  const after = matchedWord.substr(index + userInput.length);
  
  output.innerHTML = `<span class="before">${before}</span><span class="middle">${middle}</span><span class="after">${after}</span>`;

}