Comment pouvons-nous changer dynamiquement la couleur de police dans textarea en utilisant Angular/jQuery/JavaScript?

Question

Comment pouvons-nous changer dynamiquement la couleur de la police dans une zone de texte ayant plusieurs couleurs pour des mots différents en utilisant Angular/jQuery/JavaScript? Y at-il un plugin déjà disponible pour cela? J'ai trouvé quelques plugins sur Google mais ils sont tous pour la coloration syntaxique. Qui prend une langue spécifique et met en évidence.

Je dois passer plusieurs listes et la zone de texte doit changer la couleur des mots correspondants de la liste 1 en bleu, la liste 2 mots en vert et ainsi de suite.

Supposons que j'ai deux listes de mots:

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

Je voudrais avoir tous les mots list1 avec une couleur et tous les mots liste2 avec une autre couleur.

Answer 1

Vous ne pouvez pas modifier les mots de couleur dans textarea, mais vous pouvez utiliser contenteditable attribut pour modifier le texte contenu de l'élément (comme div, p, durée). Pour faire ce travail, vous pouvez utiliser le plugin javascript, mais si vous voulez le créer, vous pouvez utiliser ce code. À cette fin, vous devez besoin d'obtenir un mot dans le texte. Ensuite, vérifiez que si le mot cible est dans l'instruction SQL , mettez-le en surbrillance.

$("#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

Vous pouvez facilement changer l'attribut CSS couleur de votre textarea. Si vous avez un textarea avec le id de foo, vous pouvez changer la couleur de la police comme ceci:

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

Si vous devez changer la police color de tous vos textareas, alors vous aurez besoin de les rassembler et les changements leur color

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

Voici comment vous le faites avec Javascript simple. Avec jQuery, vous pouvez le faire comme ceci en cas de id de foo

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

pour toutes textareas

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