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 WYSIWYG编辑器的工作方式。

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

1 个答案: