如何以角度突出显示文本区域中的文本？

Question

我有 textarea 表单，当我在其中输入超过特定数量的字符（超过 2200 个字符）时，我希望在此之后的所有文本都会突出显示。

这是我的 html 代码：

<div class="form-group">
          <textarea type="text"
                    id="textAreaScroll"
                    formControlName="text"
                    placeholder="متن ..."
                    (keyup)="postLengthCheck('text')">
          </textarea>
</div>

这是我的打字稿代码：

postLengthCheck(input) {
    if (input === 'text') {
      if (this.createPostForm.controls['text'].value !== null) {
        this.postLength = this.createPostForm.controls['text'].value.length;
        this.validTextLength = 2200 - this.postLength;
        if (this.postLength > 2200) {
          this.x = this.createPostForm.controls['text'].value.substring(2200, this.postLength);
          console.log(this.x);
          this.match = new RegExp(this.x, 'ig');
          this.markText = '<mark>' + this.x + '<\/mark>';
          this.replaced = this.createPostForm.controls['text'].value.replace(this.match, this.markText);
          this.createPostForm.controls['text'].value = this.replaced;
        }
      }
    }
}

在我的css 中，我定义mark 类如下：

mark {
  border-radius: 3px;
  color: transparent;
  background-color: #b1d5e5;
}

但这不起作用。我该如何解决这个问题？

Answer 1

我建议您不要创建自己的 HTML 标签，而是使用 <span class="highlighted-text">the text</span> 之类的标签。

另外，textarea 仅包含文本（不是 HTML），因此您必须将其更改为 <div contenteditable="true">the text</div>，这就是每个 HTML 所见即所得编辑器的工作方式。