Question

180

Change color of specific words in textarea

rated 0 times [ 184] [ 4] / answers: 1 / hits: 51372 / 8 Years ago, tue, may 10, 2016, 12:00:00

I'm building a Sql query builder and would like to change the text color of a word in a textarea when the user types in words like SELECT, FROM, WHERE.

I've searched around a bit and beyond this (https://jsfiddle.net/qcykvr8j/2/) I unfortunately do not come any further.

Example 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/

But this example deletes the color when I type further.

What I want is this:

I've tried something with Keyup in combination with Contains in jQuery but that did not result in much.

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

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

I hope someone can help me with an example or sites where I can find more information .

Regards, Jens

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

wyattkennyc

Add To Favorites

Follow

Total Points: 650

Total Questions: 102

Total Answers: 90

Location: Monaco

Member since Mon, May 23, 2022

2 Years ago

answered 8 Years ago janettejordynm · Accepted Answer

You can't change the colours of words in a <textarea>, but you can use the contenteditable attribute to make a <div>, <span>, or <p> look like a <textarea>.

To do this you can use a JavaScript plugin, but if you want to create a new one, the code below may help you.

For this purpose, you need to get any word in the text. Then check that if it's a SQL keyword.

// SQL keywords

var keywords = [SELECT,FROM,WHERE,LIKE,BETWEEN,NOT LIKE,FALSE,NULL,FROM,TRUE,NOT IN];

// Keyup event

$(#editor).on(keyup, function(e){

  // Space key pressed

  if (e.keyCode == 32){

    var newHTML = ;

    // Loop through words

    $(this).text().replace(/[s]+/g,  ).trim().split( ).forEach(function(val){

      // If word is statement

      if (keywords.indexOf(val.trim().toUpperCase()) > -1)

        newHTML += <span class='statement'> + val + &nbsp;</span>;

      else

        newHTML += <span class='other'> + val + &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.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>