当前位置：首页 > 资讯 > 系统环境

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

时间：2025-11-11 19:31 作者：来源：阅读：0
扫一扫，手机访问

摘要：需求场景前端有时候需要展示日志，用textarea，也可以用div。用div设置可编辑属性的确可以做到，但是这表现的并不完全像textarea，总之，不想用div替代。如果用 textarea，需要根据里面的文本内容不同，去展示不同的颜色！不过浏览器兼容性没那么好。如果是控制textarea的style，则所有文本都是一个颜色；如果把文本放到标签里面，也不会起作用，由于标签在文本域组件里面

需求场景

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

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

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

解决方案

如果这个需要在同一个文本域里面显示不同颜色的的字体，列如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>

还有一条

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

<!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>哈哈</span>')

}

</script>

</div>

</body>

</html>

全部评论(0)

上一篇：【Python】性能加速之解析器加速Brython 库使用说明
下一篇：最全嵌入式GUI框架盘点：几大主流方案解析！

真快激活码

店铺

推荐商品