Pregunta Cambiar color de palabras especificas en textarea.


Estoy creando un generador de consultas Sql y me gustaría cambiar el color del texto de una palabra en un área de texto cuando el usuario escribe palabras como SELECT, FROM, WHERE.

He buscado alrededor de un poco y más allá de esto (https://jsfiddle.net/qcykvr8j/2/) Lamentablemente no voy más lejos.

Código de ejemplo

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/

Pero este ejemplo elimina el color cuando escribo más.

Lo que quiero es esto:

Right way

He intentado algo con Keyup en combinación con Contains en jQuery pero eso no resultó en mucho.

Tecla Arriba: https://api.jquery.com/keyup/

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

Espero que alguien me pueda ayudar con un ejemplo o sitios donde pueda encontrar más información.

Saludos, Jens


5
2018-05-10 12:49


origen


Respuestas:


No puede cambiar las palabras de color en textarea, pero puede usar contenteditable atributo para cambiar el contenido del texto del elemento (como div, p, span). Para hacer este trabajo, puede usar el complemento javascript, pero si desea crearlo, puede usar este código. Para este propósito, necesita obtener cualquier palabra en el texto. Luego, verifique que si la palabra objetivo está en la declaración SQL, resáltela.

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


14
2018-05-11 10:58