how to highlight part of textarea html code

Question

I want to achieve a python version web regexbuddy,and i encounter a problem,how to highlight match values in different color(switch between yellow and blue) in a textarea,there has a demo what exactly i want on http://regexpal.com,but i was a newbie on js,i didn't understand his code meaning. any advice is appreciated

Answer 1

There is a pre element over the textarea. So when you type anything it is copying the input on the pre element, applying some filters.

For example:

<pre id="view"></pre>
<textarea id="code"></textarea>

When you type on #code it is copying the value, applying filters and adding the HTML to the #view.

var code = document.getElementById("code");
var pre = document.getElementById("pre");
(code).onkeyup = function (){
    val = this.value;
    val = YourRegex(val);
    (pre).innerHTML = val;
};

YourRegex would be a method to match the regex and return some parsed content to the pre, allowing you to customize the appearance of the textarea (that is actually an element over it).

function YourRegex(val)
{
    // This function add colors, bold, whatever you want.
    if (/bbcc/i.test("bbcc"))
        return "<b>" + val + "</b>";
}