Change style of a specific text inside a input text-CodePudding

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

CodePudding user response：

One rough approach you can try like:

In your class file:

inputText: string;
specialText: string;

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

In the template file:

<input type="text" #specialInput (keydown)="onTextInput(specialInput.value)" />
<p>{{inputText}} <strong>{{specialText}}</strong></p>

CodePudding user response：

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.