web-dev-qa-db-fra.com

Changer la couleur de mots spécifiques dans textarea

Je construis un constructeur de requêtes SQL et je voudrais changer la couleur du texte d'un mot dans une zone de texte lorsque l'utilisateur tape des mots tels que SELECT, FROM, WHERE.

J'ai cherché un peu et au-delà ( https://jsfiddle.net/qcykvr8j/2/ ) je ne viens malheureusement pas plus loin.

Exemple de code 

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/

Mais cet exemple supprime la couleur lorsque je tape davantage.

Ce que je veux c'est ceci:

 Right way

J'ai essayé quelque chose avec Keyup en combinaison avec Contains dans jQuery mais cela n'a pas abouti à beaucoup.

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

Contient: https://api.jquery.com/contains-selector/

J'espère que quelqu'un pourra m'aider avec un exemple ou des sites sur lesquels je peux trouver plus d'informations.

Cordialement, Jens

javascriptjqueryhtmlonkeyup
9
Swolschblauw

Vous ne pouvez pas changer les mots de couleur dans textarea, mais vous pouvez utiliser l'attribut contenteditable pour changer le contenu du contenu de l'élément (comme div, p, span). Pour faire ce travail, vous pouvez utiliser le plugin JavaScript, mais si vous voulez le créer, vous pouvez utiliser ce code. Pour cela, vous devez obtenir n'importe quel 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>";
            }
        });
      	$(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>

18
Mohammad

JS FIDDLE CODE

HTML-

<div id="board" class="original" contenteditable="true"></div>
<div id="dummy" class="original"></div>

CSS-

.original {
   position:absolute;width: 50%; margin: 0 auto; padding: 1em;background: #fff;height:100px;margin:2px;border:1px solid black;color:#fff;overflow:auto;
}

#dummy{
  color:black;
}
#board{
  z-index:11;background:transparent;color:transparent;caret-color: black;
}
.original span.highlighted {
    color:red;
}

JAVASCRIPT -

var highLightedWord = ["select","insert","update","from","where"];
var regexFromMyArray = new RegExp(highLightedWord.join("|"), 'ig');
$('#board').keyup(function(event){
 document.getElementById('dummy').innerHTML = $('#board').html().replace(regexFromMyArray,function(str){
 return '<span class="highlighted">'+str+'</span>'
 })
})
var target = $("#dummy");
  $("#board").scroll(function() {
    target.prop("scrollTop", this.scrollTop)
          .prop("scrollLeft", this.scrollLeft);
  });
0
prtk712