How to style elements within the <textarea> tag?

Question

Hi, I was trying to create a "text editor" to program moon, I tried to change the color of the word Function every time it was typed, but I came across something, I can’t style any element within the textarea, here’s the code I was using:

var wait = "";
var txt = "";
words = [];

window.onkeydown = function(e) {
  txt = document.getElementById('b').value;
  var z = String(txt);
  if (String.fromCharCode(e.keyCode) == " ") {
    words.push(wait);
    wait = "";
  }
  var y = z.replace("function", "<span>hello</span>");
 document.getElementById('b').value = y

}
function myFunction(event) {
    if (window.event) {
      evt = window.event;
      wait = wait + String.fromCharCode(evt.keyCode);
      console.log(wait)
  };
}

Answer 1

One way to get the result is by doing the following:

Create a textarea I’ll set the attribute id as editor_back.

<textarea id="editor_back"></textarea>

Apply the CSS

#editor_back {
    color: transparent;
    background: transparent;
    border: 1px solid #ccc;
    position: absolute;
    padding: 10px;
    z-index: 5;
    height: 250px;
    width: 250px;
    font-family: 'Verdana';
    font-size: 0.875em;
}

Create a div I’ll set the attribute id as editor_front.

<div id="editor_front"></div>

Apply the CSS

#editor_front {
    background: #e9e9e9;
    border: 1px solid #ccc;
    padding: 10px;
    position: absolute;
    z-index: 1;
    height: 250px;
    width: 250px;
    font-family: 'Verdana';
    font-size: 0.875em;
}

Note that the div will be below the textarea, so we define the background and color as transparent.

Add the event keypress in textarea

editor_back.addEventListener('keyup', function(e) {
    txt = editor_back.value;
    var y = txt.replace(/(function\s)([a-z]*)(\(\))/g, '<span class="func">function </span><span class="func_name">$2</span><span class="par">()</span>');
    y = y.replace(/(\s?)function\s/g, '<span class="func">$1function </span>');
    y = y.replace(/(\s?)\(\)/g, '<span class="par">$1()</span>');
    editor_front.innerHTML = y
});

See working:

var txt = "";
var editor_front = document.querySelector('#editor_front');
var editor_back = document.querySelector('#editor_back');

editor_back.addEventListener('keyup', function(e) {
    txt = editor_back.value;
    var y = txt.replace(/(function\s)([a-z]*)(\(\))/g, '<span class="func">function </span><span class="func_name">$2</span><span class="par">()</span>');
    y = y.replace(/(\s?)function\s/g, '<span class="func">$1function </span>');
    y = y.replace(/(\s?)\(\)/g, '<span class="par">$1()</span>');
    editor_front.innerHTML = y
});

#editor_front {
  background: #e9e9e9;
  border: 1px solid #ccc;
  padding: 10px;
  position: absolute;
  z-index: 1;
  height: 250px;
  width: 250px;
  font-family: 'Verdana';
  font-size: 0.875em;
}

#editor_back {
  background: transparent;
  border: 1px solid #ccc;
  color: transparent;
  position: absolute;
  padding: 10px;
  z-index: 5;
  height: 250px;
  width: 250px;
  font-family: 'Verdana';
  font-size: 0.875em;
}

span.func {
  color: red;
}
span.func_name {
  color: #069;
  font-weight: bold;
}
span.par {
  color: green;
}

#ver_html {
  bottom: 0;
  position: absolute;
}

<div id="editor_front"></div>
<textarea id="editor_back" cols="30" rows="10"></textarea>

Answer 2

I’ve seen several systems of Syntax Highlighting that I understood that is the case, I could explain to you how to create your own, make the textarea become invisible by CSS and behind him having a DIV (with scroll bar) that would automatically format the text, but would need to understand a lot of Regular Expression to convert the typed text already formatted to DIV visible.

Not to mention that there would have to be a method of selecting the DIV text if it starts from the text written in TEXTAREA were selected.

So I don’t think viable, the best thing is to get these Apis ready for this:

• https://highlightjs.org/ - Demonstration: https://highlightjs.org/static/demo/
• http://prismjs.com/ - Demonstration: http://prismjs.com/test.html
• https://codemirror.net/index.html - Demonstration: https://codemirror.net/demo/fullscreen.html

But it will be up to you to choose one of the examples or find another that matches the system you want to mount.