尝试创建指令：

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[highlight]'
})
export class HighlightDirective {

 
  constructor(el: ElementRef) {
    this.changeColor(el);
 }

 changeColor(el: ElementRef) {
  
   //call the  el.nativeElement.style.color  and put your logic.....
 
 }

}

然后通过选择器调用它：

<h1 highlight>{{data}}</h1>

编写一个函数，返回最后一个单词的名字，以及没有名字的句子：

getPartsOfSentence(data: string){
const x = text.split(" ");
 const name = x[x.length-1];
 const sentenceWithoutName = x.slice(0, -1).join(" ");
return ({name, sentenceWithoutName});
}

解构两个变量，在html中分别使用它们并设置它们样式：

const {name, sentenceWithoutName} = getPartsOfSentence(data);

更新

1. regExpr应如下所示

const regText = '(' + x + ')([.,\\s])|(\\s)(' + x + '$)';
const reg = new RegExp(regText, 'gi');
text = text.replace(reg, '$3<strong>$1$4</strong>$2');

一个单词+（或，或.或\s）或如果它在\s结尾+单词+
1.在getter中，我们需要对此进行更改。oldValue

@Input() set showHighlight(words: any) {
    if (!Array.isArray(words)) this.words = [words];
    else this.words = words;
    this.oldValue=null
  }

(just已在代码中更正）

原件

典型的解决方案是使用管道，它转换HTML中的字符串，使用reg表达式替换<strong>word</strong>表示的单词。

@Pipe({
  name: 'highlight',
})
export class HighlightPipe implements PipeTransform {
  constructor(private sanitize: DomSanitizer) {}
  transform(value: any, args?: any): any {
    let text = value;
    if (args) {
      if (!Array.isArray(args)) args = [args];

      args.forEach((x) => {
         const regText = '(' + x + ')([.,\\s])|(\\s)(' + x + '$)';
         const reg = new RegExp(regText, 'gi');
         text = text.replace(reg, '$3<strong>$1$4</strong>$2');
      });
      text =text.replace(/\n/g,'<br/>')
    }
    return this.sanitize.bypassSecurityTrustHtml(text);
  }
}

La reg表达式'(' + x + ')([.,\\s])|(' + x + '$)'捕获$1或$3中的单词替换和$2中的空格、逗号或点。
而用在路上

<div class="highlight" [innerHTML]="data|highlight:'name'"></div>

看到我选择这个管道，你也可以使用一个数组，例如。

<div class="highlight" [innerHTML]="data|highlight:['name','boy']"></div>

我真的不太喜欢使用innerHTML和sanitize，所以我们将尝试一个指令，而不是可以用

<p [showHighlight]="['house','red']" >In the house the red skin wait</p>
or
<p [showHighlight]="['house','red']" >{{data}}</p>

为此我们将使用Renderer2。其思想是创建一个“div”，隐藏内容，并将内容的每次更改添加到创建的div innerHTML。
由于我们将使用ngAfterContentChecked -并且该事件执行多次，因此我们将innerHTML存储在变量“oldValue”中。

@Directive({
  selector: '[showHighlight]',
})
export class HighlightDirective implements AfterContentChecked {
  constructor(private el: ElementRef, private renderer: Renderer2) {}
  private words: string[] = [];
  private div: any = null;
  private oldValue: any;

  //in Input use a setter to create an array if it's only one string
  @Input() set showHighlight(words: any) {
    if (!Array.isArray(words)) this.words = [words];
    else this.words = words;
    this.oldValue=null
  }
  ngAfterContentChecked() {
    //we get the el.nativeElement.innerHTML
    //If is diferent than the "oldValue"

    if (this.el.nativeElement.innerHTML != this.oldValue) {
      //we store the value
      this.oldValue = this.el.nativeElement.innerHTML;

      //get the text
      let text = this.el.nativeElement.innerHTML;

      //iterate over the words array
      this.words.forEach((x) => {

        //use the reg expresion to replace
        const regText = '(' + x + ')([.,\\s])|(\\s)(' + x + '$)';
        const reg = new RegExp(regText, 'gi');
        text = text.replace(reg, '$3<strong>$1$4</strong>$2');
      });

      //replace also \n by <br/>
      text =text.replace(/\n/g,'<br/>')

      //if we've not yet create the div 
      if (!this.div) {
        //we create the div with the same "tagName" than the element
        this.div = this.renderer.createElement(
          this.el.nativeElement.tagName.toLowerCase()
        );

        //Add a class 'highlight'
        this.renderer.addClass(this.div, 'highlight');

        //And insert in parent just before the element
        this.renderer.insertBefore(
          this.el.nativeElement.parentElement,
          this.div,
          this.el.nativeElement
        );

        //finally we use style.display:'none' to hide the element
        this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
      }

      //If there a change change the innerHTML of the div
      this.renderer.setProperty(this.div, 'innerHTML', text);
    }
  }
}

见stackblitz与这两种方法
注意：我选择用<strong>word</strong>替换“word”，我在div 'hightlight'中添加了一个类，以改变styles.css中的css

.highlight strong {
  color: red;
  font-weight: normal;
}