textarea中指定位置的文字如何改变颜色？

Question

在做vue前端设计时，后台返回一串字符串放在页面的textarea文本域中，如何对textarea中指定位置的字符串改变颜色呢？
之前用C#做的exe程序用richTextBox的方法改变了背景颜色，从start位置选取到end位置，再改变颜色的

richTextBox.Select(start[index], end[index]); richTextBox.SelectionBackColor = Color.FromName("Red");

现在前端页面textarea有没有办法实现相同的效果，改变指定位置字体颜色或者改变指定位置的背景颜色呢，再或者说有没有类似richtextbox的容器

Answer 1

在web中样式都是css控制的，只能手动加标签了，加完标签的文案通过v-html再次渲染一次，不过要注意，v-html是有风险的，可能会被攻击，下面是简单的替换代码

/**
 * word: 选中的词
 * documents: 包含所选词的完整段落
 */
function markSelect(word = '', documents) {
    const reg = new RegExp(word, 'gi');
    return documents.replace(reg, '<span style="color:red;">$1</span>');
}

Answer 2

contenteditable="true" 是个不错的选择：

  <section contenteditable="true">
    <div>code title</div>
    <span style="color: blue">const</span> foo = <span style="color: green">"bar"   </span>;
  </section>

Answer 3

原生textarea做不到，富文本编辑器网上一堆，随便一个都能实现你需求

Answer 4

用 ueditor： demo