Изменение цвета определенных слов в textarea

Я создаю SQL query builder и хотел бы изменить цвет текста слова в текстовом поле, когда пользователь вводит такие слова, как SELECT, FROM, WHERE.

Я искал вокруг немного и за пределами этого (https://jsfiddle.net/qcykvr8j/2/) я, к сожалению, не иду дальше.

пример кода

HTML-код: 

<textarea name="query_field_one" id="query_field_one" onkeyup="checkName(this)"></textarea>

JS:

    function checkName(el)
    {
    if (el.value == "SELECT" || 
    el.value == "FROM" || 
    el.value == "WHERE" || 
    el.value == "LIKE" || 
    el.value == "BETWEEN" || 
    el.value == "NOT LIKE" || 
    el.value == "FALSE" || 
    el.value == "NULL" || 
    el.value == "TRUE" || 
    el.value == "NOT IN")
    {
      el.style.color='orange'

    }
    else {
      el.style.color='#FFF'

    }
  }

JSFiddle:

https://jsfiddle.net/qcykvr8j/2/

но этот пример удаляет цвет, когда я еще тип.

чего я хочу, так это:

Right way

Я пробовал что-то с Keyup в сочетании с Contains в jQuery, но это не привело к многому.

Keyup: https://api.jquery.com/keyup/

содержит:https://api.jquery.com/contains-selector/

Я надеюсь, что кто-то может помочь мне с примером или сайты, где я могу найти больше информации .

С Уважением, Йенс

6
html javascript jquery onkeyup

1 ответов

вы не можете изменить цвет слов в textarea, но вы можете использовать contenteditable атрибут для изменения текста содержимого элемента (например, div, p, span). Для этого вы можете использовать плагин JavaScript, но если вы хотите создать, Вы можете использовать этот код. Для этого нужно получить любое слово в тексте.Затем проверьте, что если целевое слово находится в инструкции SQL, выделите его.

$("#editor").on("keydown keyup", function(e){
    if (e.keyCode == 32){
        var text = $(this).text().replace(/[\s]+/g, " ").trim();
        var word = text.split(" ");
        var newHTML = "";

        $.each(word, function(index, value){
            switch(value.toUpperCase()){
                case "SELECT":
                case "FROM":
                case "WHERE":
                case "LIKE":
                case "BETWEEN":
                case "NOT LIKE":
                case "FALSE":
                case "NULL":
                case "FROM":
                case "TRUE":
                case "NOT IN":
                    newHTML += "<span class='statement'>" + value + "&nbsp;</span>";
                    break;
                default: 
                    newHTML += "<span class='other'>" + value + "&nbsp;</span>";
            }
        });
      	$(this).html(newHTML);
        
        //// Set cursor postion to end of text
        var child = $(this).children();
        var range = document.createRange();
        var sel = window.getSelection();
        range.setStart(child[child.length - 1], 1);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
        $(this)[0].focus(); 
    }
});
#editor {
    width: 400px;
    height: 100px;
    padding: 10px;
    background-color: #444;
    color: white;
    font-size: 14px;
    font-family: monospace;
}
  
.statement {
    color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editor" contenteditable="true"></div>
15