Angular에서 하이라이트 기능을 구현했기 때문에 기록용으로 남깁니다.
이번은 angular-text-input-highlight 를 참고로 구현.

　 개발 환경

Angular6(Typescript)

사용한 라이브러리

angular-text-input-highlight

구현

npm에서 설치

$　npm install --save angular-text-input-highlight

앱 어딘가에 스타일시트 포함

angular.json

"styles": [
node_modules/angular-text-input-highlight/text-input-highlight.css
],

module에 추가

sample.module.ts

import { NgModule } from '@angular/core';
import { TextInputHighlightModule } from 'angular-text-input-highlight';


@NgModule({
  imports: [
    TextInputHighlightModule
  ]
})
export class SanpleModule {}

html 구현

하이라이트 함수를 호출하기 위해 임시 버튼을 설치

sample.component.html

 <button class="btn" (click)="addTags()">
   <i aria-hidden="true">ハイライトボタン</i>
 </button>
 <div mwlTextInputHighlightContainer class="form-group" >
   <textarea
    mwlTextInputElement
    rows="4"
    class="form-control"
    [(ngModel)]="sampleText"
    #textarea
    >{{ sampleText }}
  </textarea>
  <mwl-text-input-highlight
   [tags]="tags"
   [tagCssClass]="'bg-blue'"
   [textInputElement]="textarea"
   >
  </mwl-text-input-highlight>
 </div>

css 구현

sample.component.scss

 .bg-blue {
   background-color: lightblue;
 }

.bg-pink {
  background-color: lightcoral;
}
textarea {
 width: 500px;
}

ts 파일 구현

sample.component.ts

 import { ViewEncapsulation } from '@angular/core';

import { HighlightTag } from 'angular-text-input-highlight';

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.scss'],
  encapsulation: ViewEncapsulation.None,
})

export class SampleComponent implements {
  sampleText: string = 'Hello @mattlewis92 how are you today?\n\nLook I have a #different background color!';

  tags: HighlightTag[] = [];

  public addTags(): void {
    this.tags = [];

    const matchMentions = /(@\w+) ?/g;
    let mention;
    // tslint:disable-next-line
    while ((mention = matchMentions.exec(this.sampleText))) {
      this.tags.push({
        indices: {
          start: mention.index,
          end: mention.index + 1,
        },
        data: mention[1],
      });
    }

    const matchHashtags = /(#\w+) ?/g;
    let hashtag;
    // tslint:disable-next-line
    while ((hashtag = matchHashtags.exec(this.sampleText))) {
      this.tags.push({
        indices: {
          start: hashtag.index,
          end: hashtag.index + hashtag[1].length,
        },
        cssClass: 'bg-pink',
        data: hashtag[1],
      });
    }

 }

보충

matchMentions는 강조하고자하는 문자를 정규 표현식으로 설명합니다.

아래에서 this.sampleText라고 기재하고 있는 부분이 하이라이트 시키고 싶은 문장 전체.

while ((mention = matchMentions.exec(this.sampleText)))

동작 확인

버튼을 누르기 전

버튼을 누른 후

마침내

그 외에도 Angular에서 하이라이트가 가능한 라이브러리가 있었지만, 이것이 가장 원활하게 구현할 수있었습니다.