468,133 Members | 1,315 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,133 developers. It's quick & easy.

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!
Cheers,
Sandro Mani
Sep 14 '08 #1
3 2578
acoder
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
acoder
16,027 Expert Mod 8TB
You're welcome. Glad it helped :)
Sep 15 '08 #4

Post your reply

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

Similar topics

699 posts views Thread by mike420 | last post: by
22 posts views Thread by Tuang | last post: by
14 posts views Thread by Sandy Norton | last post: by
16 posts views Thread by George Sakkis | last post: by
23 posts views Thread by Carter Smith | last post: by
19 posts views Thread by Nicolas Fleury | last post: by
4 posts views Thread by Jeremy Yallop | last post: by
177 posts views Thread by C# Learner | last post: by
4 posts views Thread by Bob hotmail.com> | last post: by
3 posts views Thread by Manuel | last post: by
27 posts views Thread by didacticone | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.