Setting a different color only for words which came out of dropdown in textarea editor(angular)

Question

What I did:

I have a dropdown. I also have a textarea. I enter text in textarea and I also choose words from the dropdown and add it to the textarea. I have done this part.

Problem:

Now I wanna differentiate the words which came from the dropdown. So I wanna show those particular words alone in red color. Any word entered through dropdown or any word entered by hand which is same as any one of the dropdown value should be shown in red color. This is what I am trying to do . I have searched stackoverflow but I could find any solutions. Kindly help if you guys know

Code:

My HTML:

<textarea #text [(ngModel)]='textValue' rows="10" cols="70">
</textarea>
<div>
  <mat-form-field class="input-style">
    <label>Dropdown</label>

    <mat-select (change)="changeValue($event)">
      <mat-option *ngFor="let li of list4" [value]="li">
        {{li}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

My TS:

  changeValue(ev) {
        this.textValue += ` ${ev.value}`;
      }

I have attached my stackblitz link: https://stackblitz.com/edit/angular-mat-form-field-tfw6de?file=app%2Fform-field-prefix-suffix-example.ts

score 0 · Answer 1 · answered Mar 19 '21 at 08:25

You can't change the colours of words in a <textarea>, but you can use the contenteditable attribute to make a <div>, <span>, or <p> look like a .

See how to change colors of editable div here: https://stackoverflow.com/a/37160584/14820590

and for you to code jquery style in your angular typescript, import this:

import $ from 'jquery';

Eliseo · Accepted Answer · 2021-04-04T19:35:20.927

Update 04-04-2021 please take a look to Owen Kevin's answer in this SO because my code don't take account the "scroll"

the only way to "highlight" text inside a textarea is to have two layers, one with a text area and another one with a div with [innerHtml]

the problem with a textarea is that you need use the same font-family than the div

from this codePen the .html like

<div class="container" [style.width]="text.getBoundingClientRect().width+'px'"
                      [style.height]="text.getBoundingClientRect().height+'px'">
  <div class="backdrop">
    <div class="highlights" [innerHtml]="textFormatted"></div>
  </div>
  <textarea #text [ngModel]='textValue' (ngModelChange)="change($event)" rows="10" cols="40">
</textarea>
</div>

A function "formatted"

  formatted(message:string)
  {
    return message.replace(/\n/g, "<br />").replace(this.regExpr,"<mark>$&</mark>")
  }

replace the message with the "mark" in the words selecteds

  regExpr=new RegExp(this.list4.map(x=>'('+x+')').join('|'),"g");

Remember call to this.formatted each time you change the textarea

  changeValue(ev) {
    this.textValue += ` ${ev.value}`;
    this.textFormatted=this.formatted(this.textValue);
  }
  change(message:string)
  {
    this.textValue = message;
    this.textFormatted=this.formatted(this.textValue);

  }

And, behare! the .css to change the mark should be in the styles.css

The stackblitz

Update if we want to change into italic is that we need made transparent the text-area color and colored the "hightlight". This make "loose" the cursor.

.highlights {
    ...
    color: #444;
}
textarea {
  ....
  color: transparent;
}

We can use -webkit-text-fill-color but it's not a standards css (works on FireFox, Chrome and Edge)

@supports (-webkit-text-stroke: 1px black) {
  textarea {
    color:#444;
    -webkit-text-stroke: 1px transparent;
    -webkit-text-fill-color: transparent;
  }
}

The modiffied stackblitz

Thanks for the try but its very buggy and not working in many scenarios — cheesyprogrammer, Mar 20 '21 at 02:13
Instead of coloring is there anyway to change it into italic? — cheesyprogrammer, Mar 20 '21 at 05:09
the problem to change into italic is that we need made transparent the text-area color and colored the "hightlight". This make "loose" the cursor, see the updated answer. Sorry I don't know why it's the reason "not work in many scenarios" — Eliseo, Mar 21 '21 at 11:51

Setting a different color only for words which came out of dropdown in textarea editor(angular)

2 Answers2