Styling Substring between two characters?

Question

I'm getting a substring that's between two characters in an input label. this label is received as @input in a shared angular component and not all labels have the same structure

this.label = Address* (number and type);

  styleSublabel() {
    if (this.label.includes('(')) {
      const mySubString = this.label.substring(
this.label.lastIndexOf('('),
this.label.lastIndexOf(')') + 1);      
    }
  }

my intention is to give a different style of css with which to put a smaller font-size and italic style to this substring but I don't see a way to do it. Is it possible? Greetings and thanks in advance Is it possible? Greetings and thanks in advance

Answer 1

you can surround it by a div for example and give it a class with the style you want.

for example

<div class="styled-label"> {mySubString} </div>

and in CSS

.styled-label{
   font-style: italic;
   font-size: 0.5em;
}

Answer 2

Did you try this? Before the substring put

"<span class='styleSub'>" 

and after the substring put

"</span>"

In your css file put

.styleSub
{
color: #eee;
} 

When you get that working you can changed the styling to anything you want.