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

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"
   }
}

user4maz · Answer

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.

userTxr4 · Answer

One rough approach you can try like:

In your class file:

inputText: string;
specialText: string;

onTextInput(text: string): void {
   const inputValues = text.split(' ');
   this.inputText = inputValues[0]; // Hello
   this.specialText = inputValues[1]; // World
}

In the template file:


{{inputText}} {{specialText}}

Arman montazeri · Answer

you can use syntax highlight lib's like highlight.js

and define new syntax and load it to work as realtime input

an example of highlight.js language definition is here : https://highlightjs.readthedocs.io/en/latest/language-guide.html

Change style of a specific text inside a input text

3 Answers