仅为文本区域编辑器中下拉菜单中出现的单词设置不同的颜色（angular）

Question

我做了什么：

我有一个 下拉列表。我还有一个 textarea。我在 textarea 中输入文本，我还从 下拉列表 中选择单词并将其添加到 textarea。这部分我已经完成了。

问题：

现在我想区分来自 下拉菜单 的单词。所以我想用红色单独显示那些特定的词。通过 dropdown 输入的任何单词或与任何 dropdown 值相同的手动输入的任何单词都应显示在 中红色 颜色。这就是我想要做的。我搜索了 Whosebug，但我可以找到任何解决方案。知道的请帮忙

代码：

我的HTML:

<textarea #text [(ngModel)]='textValue' rows="10" cols="70">
</textarea>
<div>
  <mat-form-field class="input-style">
    <label>Dropdown</label>

    <mat-select (change)="changeValue($event)">
      <mat-option *ngFor="let li of list4" [value]="li">
        {{li}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

我的TS:

  changeValue(ev) {
        this.textValue += ` ${ev.value}`;
      }

我附上了我的 stackblitz link： https://stackblitz.com/edit/angular-mat-form-field-tfw6de?file=app%2Fform-field-prefix-suffix-example.ts

Answer 1

您无法更改 <textarea> 中单词的颜色，但可以使用 contenteditable 属性制作 <div>、<span> 或 <p>看起来像 .

在此处查看如何更改可编辑 div 的颜色：

为了让您在 angular 打字稿中编写 jquery 样式，请导入：

import $ from 'jquery';

Answer 2

更新 04-04-2021 请查看 Owen Kevin 在中的回答，因为我的代码不不要考虑“滚动”

在文本区域内“突出显示”文本的唯一方法是有两层，一层带有文本区域，另一层带有 div 和 [innerHtml]

textarea 的问题是您需要使用与 div

相同的字体系列

来自this codePen.html喜欢

<div class="container" [style.width]="text.getBoundingClientRect().width+'px'"
                      [style.height]="text.getBoundingClientRect().height+'px'">
  <div class="backdrop">
    <div class="highlights" [innerHtml]="textFormatted"></div>
  </div>
  <textarea #text [ngModel]='textValue' (ngModelChange)="change($event)" rows="10" cols="40">
</textarea>
</div>

函数“格式化”

  formatted(message:string)
  {
    return message.replace(/\n/g, "<br />").replace(this.regExpr,"<mark>$&</mark>")
  }

用所选词中的“标记”替换消息

  regExpr=new RegExp(this.list4.map(x=>'('+x+')').join('|'),"g");

记得每次更改文本区域时调用 this.formatted

  changeValue(ev) {
    this.textValue += ` ${ev.value}`;
    this.textFormatted=this.formatted(this.textValue);
  }
  change(message:string)
  {
    this.textValue = message;
    this.textFormatted=this.formatted(this.textValue);

  }

而且，看！ .css 更改标记应该在 styles.css

stackblitz

Update 如果我们想变成斜体是我们需要透明的文本区域颜色和彩色的“高光”。这使光标“松散”。

.highlights {
    ...
    color: #444;
}
textarea {
  ....
  color: transparent;
}

我们可以使用 -webkit-text-fill-color，但它不是标准 css（适用于 FireFox、Chrome 和 Edge）

@supports (-webkit-text-stroke: 1px black) {
  textarea {
    color:#444;
    -webkit-text-stroke: 1px transparent;
    -webkit-text-fill-color: transparent;
  }
}

modiffied stackblitz

仅为文本区域编辑器中下拉菜单中出现的单词设置不同的颜色（angular）

Setting a different color only for words which came out of dropdown in textarea editor(angular)

javascript

textarea

typescript

angular-material

angular