472,952 Members | 2,519 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,952 software developers and data experts.

Syntax-Coloring of a textarea

Hi all,
I am writing a webbased notepad and want to include syntax-coloring. The approach I have used is to set the font color and background color of the textarea to transparent, and place the colored text in a pre behind the text area, so far so good. The code I use for coloring is the following one:

Expand|Select|Wrap|Line Numbers
  1. function colorize(){
  2.     var inTag=false, inAttr=false;
  3.     text=textarea.text();
  4.     colorarea.innerHTML=text.substring(0,selection.end).replace(/[(<>"'&]/g,function(m){
  5.         if(m=='<'){
  6.             if(inTag){return '&#'+m.charCodeAt(0)+';';}
  7.             else{inTag=true;return '<span style="color:#0000FF;"><'}}
  8.         else if(m=='>'){
  9.             if(!inTag||inAttr){return '&#'+m.charCodeAt(0)+';';}
  10.             else{inTag=false;return '></span>';}}
  11.         else if(m=='"'){if(inTag){if(!inAttr){inAttr=true;return '<span style="color:#999900;">"';}else{inAttr=false;return '"</span>';}}else{return '&#'+m.charCodeAt(0)+';';}}
  12.         else{return '&#'+m.charCodeAt(0)+';';}})+'<img src="style/caret.gif" alt="" id="caret" />'+text.substring(selection.end).replace(/[(<>"'&]/g,function(m){
  13.         if(m=='<'){inTag=true;return '<span style="color:#0000FF;"><'}
  14.         else if(m=='>'){inTag=false;return '></span>';}
  15.         else if(m=='"'){if(inTag){if(!inAttr){inAttr=true;return '<span style="color:#999900;">"';}else{inAttr=false;return '"</span>';}}else{return '&#'+m.charCodeAt(0)+';';}}
  16.         else{return '&#'+m.charCodeAt(0)+';';}});
  17.     }
where I had to emulate the caret with an animated gif because at least firefox makes the caret transparent as soon as the font color is transparent >.<.
Anyway, as you might guess, it is not really fast, considering the fact that the script is run uppon every key press event... My question, has anyone experience with a more efficient approach? Or just "forget it"?:D

Thanks for any inputs!
Sandro Mani
Sep 14 '08 #1
3 2796
16,027 Expert Mod 8TB
How about execCommand - also see the test page.
Sep 15 '08 #2
Thanks for that link, the contentEditable property was exactly what I needed!
Sep 15 '08 #3
16,027 Expert Mod 8TB
You're welcome. Glad it helped :)
Sep 15 '08 #4

Sign in to post your reply or Sign up for a free account.

Similar topics

by: mike420 | last post by:
I think everyone who used Python will agree that its syntax is the best thing going for it. It is very readable and easy for everyone to learn. But, Python does not a have very good macro...
by: Tuang | last post by:
I'm checking out Python as a candidate for replacing Perl as my "Swiss Army knife" tool. The longer I can remember the syntax for performing a task, the more likely I am to use it on the spot if...
by: Sandy Norton | last post by:
If we are going to be stuck with @decorators for 2.4, then how about using blocks and indentation to elminate repetition and increase readability: Example 1 --------- class Klass: def...
by: George Sakkis | last post by:
I'm sure there must have been a past thread about this topic but I don't know how to find it: How about extending the "for <X> in" syntax so that X can include default arguments ? This would be very...
by: Carter Smith | last post by:
http://www.icarusindie.com/Literature/ebooks/ Rather than advocating wasting money on expensive books for beginners, here's my collection of ebooks that have been made freely available on-line...
by: Nicolas Fleury | last post by:
Hi everyone, I would to know what do you think of this PEP. Any comment welcomed (even about English mistakes). PEP: XXX Title: Specialization Syntax Version: $Revision: 1.10 $...
by: Jeremy Yallop | last post by:
Looking over some code I came across a line like this if isalnum((unsigned char)c) { which was accepted by the compiler without complaint. Should the compiler have issued a diagnostic in this...
by: C# Learner | last post by:
Why is C syntax so uneasy on the eye? In its day, was it _really_ designed by snobby programmers to scare away potential "n00bs"? If so, and after 50+ years of programming research, why are...
by: Bob hotmail.com> | last post by:
Everyone I have been spending weeks looking on the web for a good tutorial on how to use regular expressions and other methods to satisfy my craving for learning how to do FAST c-style syntax...
by: Manuel | last post by:
I'm trying to compile glut 3.7.6 (dowbloaded from official site)using devc++. So I've imported the glut32.dsp into devc++, included manually some headers, and start to compile. It return a very...
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
by: nia12 | last post by:
Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.