Hey guys! I am a newbie to JS and I've been working on a small colorized source code editor for my esolang.
I've already made the colorizer, but now I am stuck. AFAIK, I should use
Code:
<textarea>
for getting keys (input), and
Code:
<div>
for displaying colorized text.
So, how can I do this? It is a little bit hard to explain, but I want it to work similarly to GitHub's code editor.
Here is my current code:
Code:
<link rel="stylesheet" type="text/css" href="editor.css" />
<script>
    if(!Array.prototype.indexOf) {
        Array.prototype.indexOf = function(needle) {
            for(var i = 0; i < this.length; i++) {
                if(this[i] === needle) {
                    return i;
                }
            }
            return -1;
        };
    }

    var ArrayKwd1 = ["+", "-", "=", "^", "[", "]", "/"];
    var ArrayKwd2 = [">", "<", "|"];
    var ArrayNum  = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];

    var ArrayKwd1H = "<span class='array_kwd_1' >";
    var ArrayKwd2H = "<span class='array_kwd_2' >";
    var ArrayNumH  = "<span class='array_number' >";
    var ArrayDefaultH = "<span class='array_default' >"

    function escapeHtml(unsafe) {
        return unsafe
            .replace("&", "&amp;")
            .replace("<", "&lt;")
            .replace(">", "&gt;")
            .replace('"', "&quot;")
            .replace("'", "'");
    }

    function colorize_array(source) {
        var output = "";
        for (var i=0; i < source.length; i++) {
            var char = source[i];
            if (ArrayKwd1.indexOf(char) > -1) {
                output += ArrayKwd1H + escapeHtml(char) + "</span>";
            }
            else if (ArrayKwd2.indexOf(char) > -1) {
                output += ArrayKwd2H + escapeHtml(char) + "</span>";
            }
            else if (ArrayNum.indexOf(char) > -1) {
                output += ArrayNumH + escapeHtml(char) + "</span>";
            }
            else {
                output += ArrayDefaultH + escapeHtml(char) + "</span>";
            }
        }
        return output;
    }

    function colorize() {
        var elem = document.getElementById("event");
        var editor = document.getElementById("text-editor");
        var source = elem.value;
        var colorized = colorize_array(source);
        editor.innerHTML = colorized;
    }
</script>
<textarea cols="1" rows="1" onkeyup="colorize()" id="event" ></textarea>
<pre>
    <div id="text-editor"></div>
</pre>
<script>colorize()</script>