<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<style type="text/css">
.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>
<textarea class="in" id='inaa' oninput='inputFunc()' style="width: 350px; height: 100px;"></textarea>
<div id='put' class="out" onclick='inaa.focus()'>
</div>
<script type="text/javascript">
function inputFunc (value) {
put.innerHTML = inaa.value.replace(/哈哈/g, '<span style="color: red;">哈哈</span>').replace(/嘿嘿/g, '<span style="color: orange;">嘿嘿</span>').replace(/绿色/g, '<span style="color: green;">绿色</span>').replace(/绿色/g, '<span style="color: green;">绿色</span>').replace(/红色/g, '<span style="color: red;">红色</span>').replace(/蓝色/g, '<span style="color: aqua;">蓝色</span>')
}
</script>
</div>
</body>
</html>
大体就是这样 先贴上代码