需求场景

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

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

解决方案

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

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

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

先是引入高亮的脚本

引入样式

只需highlightTextarea在jQuery对象上调用。

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

例如:

...

还有一条