前端如何实现textarea里的不同文本显示不同颜色

求场景

前端有时候需要展示日志，用textarea，也可以用div。用div设置可编辑属性确实可以做到，但是这表现的并不完全像textarea，总之，不想用div替代。如果用 textarea，需要根据里面的文本内容不同，去展示不同的颜色！不过浏览器兼容性没那么好。

如果是控制textarea的style，则所有文本都是一个颜色；如果把文本放到标签里面，也不会起作用，因为标签在文本域组件里面不会去解释，直接当做文本处理了。

解决方案

如果这个需要在同一个文本域里面显示不同颜色的的字体，比如warn 告警是黄色，error错误显示为红色。

大概思路有两种，有一种类似谷歌翻译那种，在上面再覆盖一层DIV

现在我要介绍的是一种较为简单的土方法。

先是引入高亮的脚本

<script src="dist/jquery/jquery.min.js"></script>
<script src="dist/jquery-ui/jquery-ui.min.js"></script>
<script src="dist/jquery-highlighttextarea/jquery.highlighttextarea.js"></script>

引入样式

<link rel="stylesheet" href="dist/jquery-ui/theme/jquery-ui.min.css">
<link rel="stylesheet" href="dist/jquery-highlighttextarea/jquery.highlighttextarea.min.css">

只需highlightTextarea在jQuery对象上调用。

$(/* selector */).highlightTextarea({
  /* options */
});

例如:

<textarea cols="50" rows="5">...</textarea>

<script>
  $('textarea').highlightTextarea({
    words: ['Lorem ipsum', 'vulputate']
  });
</script>

还有一条

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>

.in, .out {

padding: 0;

margin: 0;

position: absolute;

border: 1px solid #ccc;

width: 350px;

height: 100px;

left: 10px;

top: 10px;

font-size: 14px;

z-index: 3;

}

.in {

outline: none;

z-index: 2;

color: black !important;

text-shadow: 0px 0px 0px #fff;

-webkit-text-fill-color: transparent;

}

.out {

background-color: transparent;:

}

</style>

</div>

function inputFunc (value) {

// console.log(value)

console.log(inaa.value)

let spans = document.createElement('span')

spans.innerHTML = '哈哈'

spans.style.color = 'red'

put.innerHTML = inaa.value.replace(/哈哈/g, '<span style="color: red;">哈哈</span>')

}

</script>

</div>

</body>

</html>

辑导语：如今越来越多的APP开始更新了深色模式，那么如何做好富文本在深色模式的适配呢？本篇文章主要总结了富文本的字体颜色在深色模式如何进行优化，希望对您有帮助。

自从19年苹果发布会推出了深色模式后，越来越多的APP开始更新了深色模式，那么如何才能更好的适配深色模式呢？本文主要是总结一下富文本的字体颜色在深色模式上如何做优化。

富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能，方便那些不太懂HTML用户使用。用户是可以自己去设置文本的颜色、样式、格式等。那么如果用户在浅色模式下写出了黑色的字，在深色模式应该怎么做适配呢？

颜色构成

首先来简单了解一下颜色的构成方式，目前实际工作中比较常见的的几种色彩模式有如下几种：CMYK、RGB、HSB、HSL。

1.CMYK

主要应用于平面印刷。

2.RGB 色彩模式

是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。

3.HSB 又称 HSV

表示一种颜色模式：在 HSB 模式中，H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示亮度 HSB 模式对应的媒介是人眼。

4.HSL

是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。H(hues)表示色相，S(saturation)表示饱和度，L（Lightness）表示亮度。但 L（Lightness：亮度）与 B（Brightness：明度）分别被认为是「颜色中白色的量」和「颜色中光线的量」。

HSB 和 HSL在相同参数下，颜色差异还是挺大的。在设计上一般使用HSB模式，开发人员一般使用HSL，所以对于后面的分析，我们都采用HSL。

案例分析

主要是找了一些文档类垂直领域产品做一些相关的分析。

1.有道云笔记

对于富文本的颜色并没有做处理，在深色模式下，黑色字体颜色几乎看不出来。

2.石墨文档

对于颜色做了反白处理，黑色文字在深色模式下变成白色，黄色在深色模式下也变成了暗黄色。

图中浅色背景下的文字颜色是通过代码查看，深色背景下的文字颜色是通过截图吸取，所以存在微小误差，但是可以大概看出：石墨文档的颜色转换规则：对于H=0的颜色（也就是灰度色）在深色模式下的转换规则是：H不变，S=浅色S/2，L=80-浅色L。但对于H有数值的颜色在深色模式的转换规则是：H不变，S=浅色S/2，L=100-浅色L。

可以看出石墨文档对于富文本的处理做的很全面，不是简单的进行颜色的反色，而是对于饱和度和明度都做了相应的处理，在深色模式下，颜色会偏暗一些，以减少眼睛疲劳。

3.飞书文档

只能选择系统自带的颜色库，从其他页面粘贴复制进来也会清除样式，所以开发可以对颜色库的颜色做特殊处理。

4.钉钉文档

使用了很偷懒的方法，里没有对富文本做处理。

5.腾讯文档竟然没有深色模式

在线咨询

上一篇：「编程思维」JavaScript正则表达式的深度解析
下一篇：细数几款免费好用的在线HTML编辑器

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商