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

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

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

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

阅读 1.2k
评论
    4 个回答
    • 242

    在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>');
    }

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

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

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

          • 1.1k

          用 ueditor: demo

            撰写回答

            登录后参与交流、获取后续更新提醒