Change the color of a word in a textarea still in edition

Navigation
1

How do I make it every time the browser finds a "reserved word" in textarea , it automatically changes its color.

I want to know to make a syntax highlighting.

    
asked by anonymous 18.10.2017 / 00:47

2 answers

4

It is not possible to change parts of the text of a textarea (as well as a input ). You can apply styles (color, background, font type, size, etc.) to the entire text or to the element, not parts of it. This is because textarea does not render HTML tags, and its contents are treated as plain text.

What you can do is to use WYSIWYG plugins that replaces textarea with an editable% color and apply listeners that will detect the reserved words in the text and apply the desired color only in these words (a bit complicated work, by the way). For this you will have to search the way that JavaScript handles the instances of the plugin and do a separate programming.

Some WYSIWYG plug-ins available, among others, are TinyMCE and CKEditor .

    
18.10.2017 / 02:57
2
Just as a complement to @DVD's answer, I show a very simplistic (and with some flaws) example of how I could implement color changes of certain words using <div> with contenteditable=true : 

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

//palavras que se pretende substituir e a classe com o estilo para essas palavras
const sintaxe = [
  {
    palavra:"int",
    classe:"tipo"
  },
  {
    palavra:"if",
    classe:"base"
  }
];


$("#editor").on("keyup", function(){ //aplicar a troca para cada tecla digitada
  let cnt = $("#editor").html();

  for (s of sintaxe){ //para cada palavra aplicar a substituição no editor
    //fazer o troca da palavra por um span com mesma palavra e a classe certa
    cnt=cnt.replace(s.palavra+" ", '<span class="${s.classe}">${s.palavra}</span> ');
  }
  
  $("#editor").html(cnt); //colocar o texto substituido de volta

  //colocar o cursor no fim de novo
  placeCaretAtEnd(document.getElementById("editor"));
});
#editor {
  border:1px solid orange;
}

.tipo {
  color:darkBlue;
}

.base {
  color:purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Escrevaalgumtextocomointx;if(x==10){<divid="editor" contenteditable="true"></div>

The cursor placement function at the end came from a response in SOen and it is necessary for the example to work correctly , since when there is a html replacement of <div> by javascript the cursor returns to the beginning.

    
18.10.2017 / 14:05
Send mail function attachment php Data Flow Task: Processes, but does not write to the Database