テキストエリア内の特定の単語の色を変更する

Question

私はSqlクエリービルダーを構築しています。ユーザーが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/

しかし、この例のデさらにタイプすると色が変わります。私はjQueryのに含まれていますがそれはあまりをもたらさなかったとの組み合わせでkeyUpイベントで何かを試してみた

：私が欲しいもの

はこれです。

keyUpイベント：https://api.jquery.com/keyup/

が含まれています：https://api.jquery.com/contains-selector/

は、私は誰かが、私はより多くの情報を見つけることができます例やサイトで私を助けることができると思います。

よろしく、イェンス

Answer 1

あなたは、テキストエリアに色の単語を変更することはできませんが、（DIV、P、スパンのような）要素の内容のテキストを変更するにはcontenteditable属性を使用することができます。この作業を行うには、javascriptプラグインを使用できますが、作成する場合はこのコードを使用できます。この目的のために、あなたはテキスト内の任意の単語を取得する必要があります。

$("#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>"; 
 
      } 
 
     }); 
 
     \t $(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>