JavaScript-js怎么样可以让textarea支持html标签，部分字变红？
用户在文本域里面随机输入一段文本
例如:
将这段文本里的“SMART”单词变成红色？测试将这段文本里的“SMART”单词变成红色？
怎么样使上面的“SMART”字显示为红色？
前提条件：
1. 不能改动textarea标签为div标签，然后嵌套html标签。
2. 由于一些原因，最外层textarea标签也不能改动。
3. 词的位置和长度都是不固定的，还有可能出现多处。
期待快点解决！！
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
有一种办法，就是让textarea中指定的内容被选中(js实现)，选中内容的样式默认是 蓝底白字，那么通过修改这个默认的样式来实现想要的效果。
例： <textarea id='test'>测试将这段文本里的“SMART”单词变成红色</textarea>
<style>
/*Webkit,Opera9.5+,Ie9+*/
#test::selection {
background:#33FF99;
color:#FF3300;
}
#test::-moz-selection {
background:#33FF99;
color:#ff3300;
}
#test::-webkit-selection {
background:#33FF99;
color:#FF3300;
}
</style>
效果如下图：（绿底红字）
将 background:改为 none 不会出现背景色。
经过测试，firefox，Opera,Google Chrome 都支持以上样式，但是郁闷的是 Opera,Google Chrome 如果在textarea中文字选中的话是没效果，不知道为什么？
单独的CSS是无法实现的，需要脚本的配合, Textarea对象的canHaveChildren属性可以包含子对象，需要将要显示的HTML放在DIV(或SPAN)中，再用Textarea的appendChild方法把这个DIV添加为TextArea的子对象，这就可以在TextArea中显示DIV中的所有效果了。
说明：IE下效果已经OK,firefox还不清楚哪里原因没有识别。
<textarea contenteditable=false id="tt"> </textarea> <script> var oLink=document.createElement("a"); oLink.href="http://domain.com"; oLink.innerHTML="<font color=red>http:www</font><font color=blue>.domain.com</font>"; document.all("tt").appendChild(oLink); </script>再补充一个方法：
将Textarea要输出的内容写到一个DIV中，用JS将DIV直接拿出来，这个也是可以考虑的。
<div id="wjtest"> <font color="#0066FF">将这段文本里的</font><font color="#FF0000" size="6"><b>“SMART”</b></font><font color="#666;">单词变成红色</font> </div> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>textare输出不同样式文本</title> </head> <body> <textarea id="fckedit" name="textarea" cols="80" rows="15" onSelect=""></textarea> <br> <script language="JavaScript"> Obj = document.getElementById("wjtest"); fckedit.appendChild(Obj); </script> </body> </html>