javascript - 检查文本区域或输入是否有需要的特殊单词

Question

我想为我的网站创建一个编码区域，我需要对其进行颜色编码(语法突出显示)，我用Google搜索了很多次，但我仍然找不到适合我的正确答案，这里是我现在的代码。 我正在使用 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" );
  }

});

});

Answer 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>