检查 textarea 或 input 有一些特殊的单词需要答案

【问题标题】：Check textarea or input have some special word in need检查 textarea 或 input 有一些特殊的单词需要
【发布时间】：2016-05-30 11:06:43
【问题描述】：

我想为我的网站制作一个编码区，我需要让它有颜色编码（语法突出显示），我用谷歌搜索了很多，但我仍然找不到适合我的正确答案，这里是我现在的代码。我正在使用Jquery

HTML：

<textarea class="CodeArea codingground">

  <div class="HelloMate">

  </div>

</textarea>

JS：

$(function(){

$('.CodeArea.codingground').on('input',function(){
  var code = $(this).val();

  if (code.indexOf('class')>=0) {
    $( "textarea:contains('class')" ).css( "color", "red" );
  }

});

});

【问题讨论】：

强烈推荐使用ace.c9.io等编辑器
你想怎么做？类似于Stack Overflow?
等等，高亮和你的代码是两个不同的东西。您是要显示验证错误还是要让用户输入代码并突出显示它？
让用户输入代码并高亮显示

标签： javascript jquery html syntax-highlighting

【解决方案1】：

textarea 无法做到这一点。

您可以将<code> 标记与contenteditable 属性结合使用。一些 Javascript，你会得到你想要的，即使你应该考虑使用一个库来做类似的事情。

var text = jQuery('code').text();
text = text.replace('class', '<span style="color: red">class</span>');
jQuery('code').html(text);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code contenteditable="true">
    class Blubb() {

    }
</code>

【讨论】：