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

alt text

Added Tag : javascript , this looks to be a question on how to highlight a text area using javascript. — pyfunc, Sep 27 '10 at 16:22

dude · Answer 1 · 2016-06-02T06:15:23.493

2

To save time you should consider using an existing library for this requirement.

Quote from here:

As textarea elements can’t render HTML, this plugin allows you to highlight text inside textarea elements.

jQuery highlightTextarea.

Demo: Codepen

Usage:

$context.highlightTextarea(options);

edited Jun 02 '16 at 06:15

answered May 21 '16 at 14:26

dude

5,678
11
54
81

You could consider making a Stack Snippet instead of linking to Codepen. This way, you can run it directly on Stack Overflow. – Tunaki May 21 '16 at 17:30
Julian, you should disclose that the article was written by you. Also, I'd like to point out that the specific plugin that you recommended is the exact same one that I pointed out back in 2013... Not a big deal, but it probably would have been more considerate to add a comment to my answer rather than downvoting my answer and adding your own... – rinogo Jun 02 '16 at 01:13
@rinogo It is not a promotion of a project. I've just named the article since there's a description why it's not possible to use a normal highlighter library. However, I've updated my answer to not look like a promotion. About your answer: While you're providing a link to a project that would solve the issue, you don't provide an example (Codepen, JSFiddle, StackOverflow Snippet) or a usage example. – dude Jun 02 '16 at 06:15

BrunoLM · Accepted Answer · 2010-09-27T16:47:15.663

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>";
}

rinogo · Answer 3 · 2016-06-02T01:06:45.280

0

@BrunoLM's solution is excellent, but might require more hacking than you're comfortable with. If you're interested (and if jQuery is already in your stack), the following plugin may be worth taking a look at:

http://garysieling.github.io/jquery-highlighttextarea/

edited Jun 02 '16 at 01:06

answered Dec 21 '13 at 00:02

rinogo

8,491
12
61
102

Can the downvoter please provide a reason why this is not a good answer? For a "newbie on js" (sic), this seems like a reasonable answer. – rinogo May 24 '16 at 00:19

how to highlight part of textarea html code

3 Answers3