Question

我试图根据更改在文本区域中突出显示部分文本。我正在使用第三方库查找差异并创建追加到文本的元素标签。但是我不确定什么是错的没有得到强调。这是我的HTML，角度代码以及显示“检查”选项卡（F12）的图像。 Image of inspect tab。 enter image description here

HTML代码：

<div class="topic-section">
  <label class="edit-title">Topic Description (System, Read-Only)</label>
  <textarea id="test"  rows="14" cols="60" class="description edit-text-area" [(ngModel)]="data.topicDescLong" readonly></textarea>
</div>
<div class="topic-section topic-divider">
  <label class="edit-title">Topic Description for Presentation</label>
  <textarea  rows="14" cols="60" class="description edit-text-area" [(ngModel)]="data.editedTopicDescLong" (ngModelChange)="onEditLongTopicDescChange()"></textarea>
</div>

角度组件TS文件：

onEditLongTopicDescChange(){
.....some more code...
this.diffchar = Diff.diffChars(this.data.topicDescLong, this.data.editedTopicDescLong );
   this.display = document.getElementById('test');
   this.fragment = document.createDocumentFragment();
   this.isHighlight = true;
   this.diffchar.forEach(element => {
     if (element.removed) {
       this.color = 'yellow';
       this.span = document.createElement('span');
       this.span.style.backgroundColor = this.color;
       this.span.appendChild(document
        .createTextNode(element.value));
      console.log(this.span);
      this.fragment.appendChild(this.span);
      };
     this.display.appendChild(this.fragment);
}

我希望删除的字符会根据更改在文本区域中突出显示。

如何使用Angular在文本区域中突出显示文本

0 个答案: