Change style of a specific text inside a input text

Question

I want to apply some style to a specific text inside an input text tag

If the user introduces "Hello world" in the input text tag and the special text is "world"

I hope this Output:

My html code looks like this

<input name="inputTest" ng-model="inputTest">

My javascript code is activated by an external button that call a "checkInput" function

let specialText = "world"
textArr = inputTest.split(/(\s+)/);
for(const text of textArr){
   if(text == specialText){
      //Do something to change style of the "special text"
   }
}

Answer 1

I am not sure if this can be done with an input element. One option to consider is using editable content. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content Which you can style more freely than an actual input. You could also use javascript in combination with editable content to handle the styling.