Angular/jQuery/JavaScriptを使用してテキスト領域のフォントの色を動的に変更するにはどうすればよいですか？

Question

Angular/jQuery/JavaScriptを使用して、異なる単語に対して複数のcoloraを持つテキストエリアのフォント色を動的に変更するにはどうすればよいですか？このプラグインはすでに利用可能ですか？ Googleのプラグインのいくつかを見つけましたが、それはすべてシンタックスハイライト/カラーリング用です。特定の言語とハイライトを取ります。

複数のリストを渡す必要があり、テキスト領域は一致する単語の色をリスト1から青に変更し、2ワードを緑にリストするなどしてください。

は、私は言葉の二つのリストがあるとします

var list1 = ['apple', 'banana']; 
var list2 = ['house', 'apartment']; 

を私は1つの色と別の色とlist2の中のすべての単語をリスト1にあるすべての単語を持っていると思います。

Answer 1

あなたは、テキストエリアに色の単語を変更することはできませんが、（ のdiv、P、スパンのような）要素の内容のテキストを変更する contenteditable属性を使用することができます。この作業を行うには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>"; 
 
      } 
 
     }); 
 
     \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: 100%; 
 
    height: 200px; 
 
    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>

Answer 2

あなたが簡単にtextareaのカラーCSS属性を変更することができます。あなたがfooのidでtextareaを持っている場合は、次のようにそのフォントの色を変更することができます。

document.getElementById("foo").style.color = "red"; 

すべてのあなたtextareasのフォントcolorを変更する必要がある場合は、あなたがそれらと変更を収集する必要がありますそのcolor

var textareas = document.getElementsByTagName("textarea"); 
for (var index in textareas) { 
    textareas[index].style.color = "red"; 
} 

これはプレーンなJavaScriptでそれを行う方法です。 jQueryのを使用すると、foo

$("#foo").css("color", "red"); 

、すべてのtextareas

$("textarea").css("color", "red");