how can you highlight text multiple colors within textarea?

[dsaba]

I was wondering what css tricks/methods you can use to highlight text multiple colors within the same textarea. I am aware of how to change attributes to the main textarea tag itself, but this changes the colors for the entire textarea, so thats 1 color for the whole textarea

 

I'm inspired by this page:

http://tinyurl.com/2ks2be

 

If you look at the source of html/css you will find:

CSS:

#search                     {height:60px; width:99.75%;}
#input                      {height:375px; width:99.75%; margin-top:10px;}
.smartField                 {position:relative; overflow:auto; border:1px solid #ccc; background:#f9f9f9;}
.smartField pre,
.smartField textarea        {font:100% "courier new",monospace; width:100%;}
.smartField pre             {z-index:1; color:#f9f9f9;}
.smartField textarea        {z-index:2; border:0; background:transparent; position:absolute; top:0; height:100%; min-height:100%; overflow:hidden;}

/* Highlighting ------------------------------------- */
b, i, u       {font-weight:normal; font-style:normal; text-decoration:none;}
#input b      {background:#fff000; color:#fff000;}
#input i      {background:#80c0ff; color:#80c0ff;}
#search b     {background:#aad1f7; color:#aad1f7;}
#search i     {background:#f9ca69; color:#f9ca69;}
#search i b   {background:#f7a700; color:#f7a700;}
#search i u   {background:#efba4a; color:#efba4a;} /* No RB equivalent */
#search b.g1  {background:#d2f854; color:#d2f854;}
#search b.g2  {background:#9ec70c; color:#9ec70c;}
#search b.g3  {background:#ecc9f7; color:#ecc9f7;}
#search b.g4  {background:#54b70b; color:#54b70b;}
#search b.g5  {background:#b688cf; color:#b688cf;}
#search b.err {background:#ff4300 !important; color:#ff4300 !important;}

 

HTML:

<div id="body">
	<div id="search" class="smartField">
		<textarea cols="100" rows="3" tabindex="1">look +_++how it is (hi(ghligh)ted)</textarea>

	</div>
	<div id="input" class="smartField">
		<textarea cols="100" rows="10" tabindex="2"></textarea>
	</div>
</div>

 

 

What puzzles me is that there are no tags inside the textarea itself and around the highlighted text, yet obviously there are css styles made for highlighting text. So how can you apply a style if you don't put tags around the text!??

I'm interested in seeing any js and/or html and/or css solution to this

 

-thanks

[jos.]

they are inputing <b> and <i> tags with javascript.... with regular expressions their code is here.

 

http://regexpal.com/assets/build-0.1.3.js

 

I dont think a human wrote it though... no line breaks.. ???

[dsaba]

Hi thanks for the reply, but I do do some research of my own to try to solve the problem before I post..

I am aware of the javascript, but I showed you a static link where the text inside the area is already present, therefore "already highlighted"

 

From the CSS it looks like they have defined styles for this highlighting, so really they highlighting comes from  CSS, how do they implement this CSS is what I want to know...

How can you implement css without putting tags around the area you want implemented? This perplexes me. If there is a way to do this with javascript i'd like to know. If you put any kind of span tag inside a textarea it will have the same effect as putting the tags <xmp></xmp> around the span tag, in other words it doesn't work.

[dbrimlow]

I am aware of the javascript, but I showed you a static link where the text inside the area is already present, therefore "already highlighted"

 

You are still missing the point. Don't mistake "static" html pages with "non-dynamic" html pages.

 

Once a "static" page uses something to alter it in any way (including browser side css or jscript) in becomes a "dynamic" page. A true "static" web page is one that once coded stays exactly the same until physically changed by hand.

 

The page you link is to is still a dynamic page and the jscript is using a reg ex to look at the text to replace the colors when predefined placement of characters are met. Even though a page may be considered a "static" page because it may not be auto-generated by server side code, it is still  "dynamic" in that the browser side code jscript and/or css alter the static elements.

 

It is not the css that is doing it.  And so far as I know, it can't be done.

[dsaba]

If there is a way to do this with javascript i'd like to know.

So you say its not css... its JS, well how is it done then?

 

[dbrimlow]

The regular expression here is a monster -and I'm no reg ex expert - but to illustrate how they may have formed the logic it would be something possibly like this:

 

display all "+" characters with a red background.

 

display all "+" characters before and after an underscore character with a blue background.

 

display all parentheses with a light green background.

 

display all embedded parentheses with a dark green background.

 

There are so many ways to form the logic within a reg ex.

 

It could also be:

 

display all "+" characters with a with a blue background but display the last "+" character of  multiple "+" characters with a red background.

 

etc.

 

This is what makes reg ex so powerful.

 

 

 

[dsaba]

thanks for the interest dbrimlow, but "you're not getting the point"

my question has nothing to do with regex, its about how to display the multiple highlighting effect within a textarea

 

so you say display "x" character this "color" well how will you do this within a textarea, whether you implement it with css, js, whatever

I want to see this code.

[dbrimlow]

This IS their code, you have to understand both JS AND regular expressions for it to make sense:

 

http://regexpal.com/assets/build-0.1.3.js

[jos.]

Here you go... dsaba This is the code to make it work... Have at it... 

 

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(p(){6(2d.E){q}y k={1i:1i,V:1i.R.V,K:1l.R.K,F:1l.R.F,1M:1l.R.1M};y l={3N:/(?:[^[#\\s\\\\]+|\\\\(?:[\\S\\s]|$)|\\[\\^?]?(?:[^\\\\\\]]+|\\\\(?:[\\S\\s]|$))*]?)+|(\\s*#[^\\n\\r\\4x\\4t]*\\s*|\\s+)([?*+]|{[0-9]+(?:,[0-9]*)?})?/g,3f:/(?:[^[\\\\.]+|\\\\(?:[\\S\\s]|$)|\\[\\^?]?(?:[^\\\\\\]]+|\\\\(?:[\\S\\s]|$))*]?)+|\\./g,32:/(?:[^\\\\[]+|\\\\(?:[\\S\\s]|$))+|\\[\\^?(]?)(?:[^\\\\\\]]+|\\\\(?:[\\S\\s]|$))*]?/g,2Y:/(?:[^[(\\\\]+|\\\\(?:[\\S\\s]|$)|\\[\\^?]?(?:[^\\\\\\]]+|\\\\(?:[\\S\\s]|$))*]?|\\((?=\\?))+|(\\()(?:<([$\\w]+)>)?/g,2O:/(?:[^\\\\[]+|\\\\(?:[^k]|$)|\\[\\^?]?(?:[^\\\\\\]]+|\\\\(?:[\\S\\s]|$))*]?|\\\\k(?!<[$\\w]+>))+|\\\\k<([$\\w]+)>([0-9]?)/g,3Y:/(?:[^$]+|\\$(?![1-9$&`\']|{[$\\w]+}))+|\\$(?[1-9]\\d*|[$&`\'])|{([$\\w]+)})/g};E=p(e,f){f=f||"";6(f.X("x")>-1){e=k.F.N(e,l.3N,p(a,b,c){q b?(c?c:"(?"):a})}y g=I;6(f.X("k")>-1){y h=[];e=k.F.N(e,l.2Y,p(a,b,c){6(b){6(c)g=1n;h.2q(c||3r);q"("}B{q a}});6(g){e=k.F.N(e,l.2O,p(a,b,c){y d=b?h.X(b):-1;q d>-1?"\\\\"+(d+1)+(c?"(?"+c:""):a})}}e=k.F.N(e,l.32,p(a,b){q b?k.F.N(a,"]","\\\\]"):a});6(f.X("s")>-1){e=k.F.N(e,l.3f,p(a){q a==="."?"[\\\\S\\\\s]":a})}y i=k.1i(e,k.F.N(f,/[4q]+/g,""));6(g)i.T=h;q i};1i.R.2j=p(a){a=(a||"")+(z.2G?"g":"")+(z.3c?"i":"")+(z.3a?"m":"");y b=1v E(z.2N,a);6(!b.T&&z.T){b.T=z.T.4d()}q b};1i.R.V=p(a){y b=k.V.N(z,a);6(!(z.T&&b&&b.C>1)){q b}1f(y i=1;i<b.C;i++){y c=z.T[i-1];6(c)b[c]=b[i]}q b};1l.R.K=p(a){6(!a.T||a.2G){q k.K.N(z,a)}q a.V(z)};1l.R.F=p(g,h){6(!(g 31 k.1i&&g.T)){q k.F.2M(z,Y)}6(2H h==="p"){q k.F.N(z,g,p(){Y[0]=1v 1l(Y[0]);1f(y i=0;i<g.T.C;i++){6(g.T[i])Y[0][g.T[i]]=Y[i+1]}q h.2M(2d,Y)})}B{q k.F.N(z,g,p(){y f=Y;q k.F.N(h,l.3Y,p(a,b,c){6(b){1E(b){L"$":q"$";L"&":q f[0];L"`":q f[f.C-1].1e(0,f[f.C-2]);L"\'":q f[f.C-1].1e(f[f.C-2]+f[0].C);2y:y d="";b=+b;1S(b>g.T.C){d=k.1M.N(b,"").3H()+d;b=1I.2A(b/10)}q(b?f[b]:"$")+d}}B 6(c){y e=g.T.X(c);q e>-1?f[e+1]:a}B{q a}})})}};1l.R.1M=p(s,a){6(!(s 31 k.1i)){q k.1M.2M(z,Y)}6(!s.2G)s=s.2j("g");6(a===2B||+a<0){a=I}B{a=1I.2A(+a);6(!a){q[]}}y b=1v k.1i("^"+s.2N+"$",(s.3c?"i":"")+(s.3a?"m":"")),K,1y=[],1K=0,i=0;1S((!a||i++<=a)&&(K=k.V.N(s,z))){y c=!K[0].C;6(c&&s.1x>K.1A)s.1x=K.1A;6(s.1x>1K){6(K.C>1){k.F.N(K[0],b,p(){1f(y j=1;j<Y.C-2;j++){6(Y[j]===2B)K[j]=2B}})}1y=1y.2t(z.1e(1K,K.1A),(K.1A===z.C?[]:K.4C(1)));1K=s.1x}6(c)s.1x++}q(1K===z.C)?(s.Q("")?1y:1y.2t("")):(a?1y:1y.2t(z.1e(1K)))}})();E.4A=p(){y b=/[-[\\]{}()*+?.\\\\^$|,#\\s]/g;q p(a){q 4z.F.N(a,b,"\\\\$&")}}();E.H=p(a,b){y c="/"+a+"/"+(b||"");q Y.3v[c]||(Y.3v[c]=1v E(a,b))};E.4u=p(){1i=E};6(!3t.R.X){3t.R.X=p(a,b){y c=z.C;1f(y i=(b<0)?1I.2r(0,c+b):b||0;i<c;i++){6(z[i]===a)q i}q-1}}p $(a){6(a.1N)q a;6(2H a==="4s")q 1u.4r(a);q I};y 2o=p(){y b=/^\\s\\s*/,3o=/\\s\\s*$/;q p(a){q a.F(b,"").F(3o,"")}}();p 3n(a,b){y c=$(a);/*@2k c.1Z=b;q c;@*/y d=c.4o(I).1Z=b;c.3k.4m(d,c);q d};p 3i(a,b){a=3n(a,"");6(a.3h){y c=a.1G,1o=a.1o,1N=a.1N;a.3h="<"+1N+" 1G=\\""+c+"\\" 1T=\\""+1o+"\\">"+b+"</"+1N+">";a=$(c)}B{a.1Z=b}q a};p 2i(a,b,c){y d=($(c)||1u).3b(b||"*"),2g=[];1f(y i=0;i<d.C;i++){6(1L(a,d[i]))2g.2q(d[i])}q 2g};p 1L(a,b){q E.H("(?:^|\\\\s)"+a+"(?:\\\\s|$)").Q($(b).1o)};p 1C(a,b){b=$(b);6(!1L(a,b)){b.1o=2o(b.1o+" "+a)}};p 1B(a,b){b=$(b);b.1o=2o(b.1o.F(E.H("(?:^|\\\\s)"+a+"(?:\\\\s|$)","g")," "))};p 30(a,b){6(1L(a,b)){1B(a,b)}B{1C(a,b)}};p 2U(a,b,c){1B(a,c);1C(b,c)};p 2W(a,b){6(a.2V){y c=a.4c,2T=a.2S,2h=(c+b.C);a.1g=(a.1g.1e(0,c)+b+a.1g.1e(2T));a.2V(2h,2h)}B 6(1u.2X){y d=1u.2X.42().3Z=b;d.5j()}};p 2K(a,b){1f(y c 3V b)a[c]=b[c];q a};p 2J(d){y a=d.5i,i,l,n;6(a){l=a.C;1f(i=0;i<l;i+=1){n=a[i].5g;6(2H d[n]===\'p\'){d[n]=3r}}}a=d.3R;6(a){l=a.C;1f(i=0;i<l;i+=1){2J(d.3R[i])}}};y 2s=5e.5c.X("59")>-1,3L/*@2k=1n@*/,3K/*@2k=@58<5.7@*/;y J={1h:{U:1v 1H("U"),O:1v 1H("O"),2z:{1c:{g:$("4S"),i:$("4R"),m:$("4O"),s:$("4N")},1X:$("1X"),1d:$("1d"),1R:$("1R")}}};2K(J,p(){y f=J.1h,o=f.2z;q{1d:p(){y d={3G:/`~\\{((?:[^}]+|\\}(?!~`))*)\\}~`((?:[^`]+|`(?!~\\{(?:[^}]+|\\}(?!~`))*\\}~`))*)(?:`~\\{((?:[^}]+|\\}(?!~`))*)\\}~`)?/g,3D:/^(?:[^\\\\|]+|\\\\[\\S\\s]?|\\|(?=[\\S\\s]))*/};q p(){y a=1l(f.U.M.1g),O=1l(f.O.M.1g);6(E.H(\'<[3C] 1T="?2E"?>\').Q(f.U.1Q.1Z)||(!a.C&&!o.1R.1b)||!o.1d.1b){f.O.1s();q}4D{y b=1v E(d.3D.V(a)[0],(o.1c.g.1b?"g":"")+(o.1c.i.1b?"i":"")+(o.1c.m.1b?"m":"")+(o.1c.s.1b?"s":""))}4B(2E){f.O.1s();q}6(o.1R.1b){y c=("`~{"+O.F(b,"}~`$&`~{")+"}~`").F(E.H("`~\\\\{\\\\}~`|\\\\}~``~\\\\{","g"),"")}B{y c=O.F(b,"`~{$&}~`")}c=c.F(E.H("[<&>]","g"),"1F").F(d.3G,"<b>$1</b>$2<i>$3</i>");f.O.28(c)}}(),26:p(){6(o.1X.1b){f.U.28(3z(f.U.M.1g))}B{f.U.1s()}},4y:p(){y a=(o.1c.i.1b?"i":"")+(o.1c.m.1b?"m":"")+(o.1c.s.1b?"s":""),3y=3x(f.U.M.1g),3w=3x(f.O.M.1g);4w="./?1c="+a+"&4v="+3y+"&O="+3w}}}());y 3z=p(){y j={3u:/\\[\\^?]?(?:[^\\\\\\]]+|\\\\[\\S\\s]?)*]?|\\\\(?:0(?:[0-3][0-7]{0,2}|[4-7][0-7]?)?|[1-9]\\d*|x[\\23-1D-f]{2}|u[\\23-1D-f]{4}|c[A-Z]|[\\S\\s]?)|\\((?:\\?[:=!]?)?|(?:[?*+]|\\{\\d+(?:,\\d*)?\\})\\??|[^.?*+^${[()|\\\\]+|./g,3s:/^(<1w>\\[\\^?)(<2p>]?(?:[^\\\\\\]]+|\\\\[\\S\\s]?)*)(<22>]?)$/.2j("k"),3q:/[^\\\\-]+|-|\\\\(?:[0-3][0-7]{0,2}|[4-7][0-7]?|x[\\23-1D-f]{2}|u[\\23-1D-f]{4}|c[A-Z]|[\\S\\s]?)/g,3p:/^(?:[?*+]|\\{\\d+(?:,\\d*)?\\})\\??$/},G={21:0,1t:1,2n:2,2m:3};p P(a){q\'<b 1T="2E">\'+a+\'</b>\'};p 2l(a){6(a.C>1&&a.1p(0)==="\\\\"){y t=a.1e(1);6(E.H("^c[A-Z]$").Q(t)){q"4p".X(t.1p(1))+1}B 6(E.H("^(?:x[0-3m-1D-f]{2}|u[0-3m-1D-f]{4})$").Q(t)){q 3l(t.1e(1),16)}B 6(E.H("^(?:[0-3][0-7]{0,2}|[4-7][0-7]?)$").Q(t)){q 3l(t,}B 6(t.C===1&&"4n".X(t)>-1){q I}B 6(t.C===1){1E(t){L"b":q 8;L"f":q 12;L"n":q 10;L"r":q 13;L"t":q 9;L"v":q 11;2y:q t.2u(0)}}}B 6(a!=="\\\\"){q a.2u(0)}q I};p 3g(a){y b="",1q=j.3s.V(a),1O=j.3q,D={1r:I,G:G.21},K,m;b+=1q.22?1q.1w:P(1q.1w);1S(K=1O.V(1q.2p)){m=K[0];6(m.1p(0)==="\\\\"){6(E.H("^\\\\\\\\[3e]$").Q(m)){b+=P(m)={1r:D.G!==G.1t}}B 6(E.H("^\\\\\\\\[3d]$","i").Q(m)){b+="<b>"+m+"</b>"={1r:D.G!==G.1t,G:G.2n}}B 6(m==="\\\\"){b+=P(m)}B{b+="<b>"+m.F(E.H("[<&>]"),"1F")+"</b>"={1r:D.G!==G.1t,2D:2l(m)}}}B 6(m==="-"){6(D.1r){y c=1O.1x,2a=1O.V(1q.2p);6(2a){y d=2l(2a[0]);6((d!==I&&D.2D>d)||D.G===G.2n||E.H("^\\\\\\\\[3d]$","i").Q(2a[0])){b+=P("-")}B{b+="<u>-</u>"}D={1r:I,G:G.1t}}B{6(1q.22){b+="-"}B{b+=P("-");1j}}1O.1x=c}B{b+="-"={1r:D.G!==G.1t}}}B{b+=m.F(E.H("[<&>]","g"),"1F")={1r:(m.C>1||D.G!==G.1t),2D:m.2u(m.C-1)}}}q b+1q.22};q p(b){y c="",2F=0,1k=0,15=[],D={W:I,G:G.21},K,m;p 1W(a){q\'<b 1T="g\'+1k+\'">\'+a+\'</b>\'};1S(K=j.3u.V(b)){m=K[0];1E(m.1p(0)){L"[":c+="<i>"+3g(m)+"</i>"={W:1n};1j;L"(":6(m.C===2){c+=P(m)}B{6(m.C===1)2F++;1k=1k===5?1:1k+1;15.2q({1A:c.C+14,1w:m});c+=1W(m)}D={W:I};1j;L")":6(!15.C){c+=P(")")={W:I}}B{c+=1W(")")={W:!E.H("^[=!]").Q(15[15.C-1].1w.1p(2)),1m:"g"+1k};1k=1k===1?5:1k-1;15.3H()}1j;L"\\\\":6(E.H("^[1-9]").Q(m.1p(1))){y d="",1z=+m.1e(1);1S(1z>2F){d=E.H("[0-9]$").V(1z)[0]+d;1z=1I.2A(1z/10)}6(1z>0){c+="<b>\\\\"+1z+"</b>"+d}B{y e=E.H("^\\\\\\\\([0-3][0-7]{0,2}|[4-7][0-7]?|[4k])([0-9]*)").V(m);c+="<b>\\\\"+e[1]+"</b>"+e[2]}}B 6(E.H("^[4j]").Q(m.1p(1))){6(E.H("^\\\\\\\\[3e]$").Q(m)){c+=P(m)={W:I};1j}c+="<b>"+m+"</b>";6("3C".X(m.1p(1))>-1){D={W:I};1j}}B 6(m==="\\\\"){c+=P(m)}B{c+=m.F(E.H("[<&>]"),"1F")}D={W:1n};1j;2y:6(j.3p.Q(m)){6(D.W){y f=E.H("^\\\\{([0-9]+)(?:,([0-9]*))?").V(m);6(f&&((f[1]>2Z)||(f[2]&&((f[2]>2Z)||(+f[1]>+f[2]))))){c+=P(m)}B{c+=(D.1m?\'<b 1T="\'+D.1m+\'">\':\'<b>\')+m+\'</b>\'}}B{c+=P(m)}D={W:I}}B 6(m==="|"){6(D.G===G.21||(D.G===G.2m&&!15.C)){c+=P(m)}B{c+=15.C?1W("|"):"<b>|</b>"}D={W:I,G:G.2m}}B 6("^$".X(m)>-1){c+="<b>"+m+"</b>"={W:I}}B 6(m==="."){c+="<b>.</b>"={W:1n}}B{c+=m.F(E.H("[<&>]","g"),"1F")={W:1n}}}}y g=0;1f(y i=0;i<15.C;i++){y h=15[i].1A+g;c=(c.1e(0,h)+P(15[i].1w)+c.1e(h+15[i].1w.C));g+=P("").C}q c}}();p 1H(a){a=$(a);y b=a.3b("4i")[0],1U=1u.4h("4g");b.1G=a.1G+"4f";1U.1G=a.1G+"4e";a.4b(1U,b);b.4a=p(e){1H.R.2R(e)};b.49=p(e){1H.R.2Q(e)};6(3L)a.1m.48="1V";6(b.2P)b.2P=I;6(2s)b.1m.47="-46";z.2f=a;z.M=b;z.1Q=1U};2K(1H.R,{28:p(a){z.1Q=3i(z.1Q,a+"<43>&41;");z.29()},1s:p(){z.28(z.M.1g.F(E.H("[<&>]","g"),"1F"))},29:p(){z.M.1m.3j="";y a=z.M.4l,1Y=z.M.1Y;z.M.1m.3j=(a===1Y?1Y-1:a++"2L";z.M.1m.3X=1I.2r(z.1Q.3W,z.2f.3W-2)+"2L"},2R:p(e){e=e||3U;6(!z.3T(e))q I;y a=e.25||e.2e;1E(a){L J.1h.U.M:2I(p(){J.26.N(J)},0);1j}6(2s&&a.2S===a.1g.C){a.3k.5h=a.5f}z.3S(e)},2Q:p(e){e=e||3U;y a=e.25||e.2e;z.2c=0;6(z.24){z.24=I;1E(a){L J.1h.U.M:L J.1h.O.M:J.1d();1j}}},3S:p(e){y a=e.25||e.2e;z.2c++;6(z.2c>2){J.1h.O.1s();z.24=1n}B{1E(a){L J.1h.U.M:L J.1h.O.M:2I(p(){J.1d.N(J)},0);1j}}},3T:p(e){y a=e.25||e.2e;6(z.3Q.X(e.3E)>-1)q I;6((e.3E===9)&&(a===J.1h.O.M)&&!e.5d){2W(a,"\\t");6(e.3O){e.3O()}B{e.5b=I}6(2d.5a){2I(p(){a.3M()},0)}}q 1n},24:I,2c:0,3Q:[16,17,18,19,20,27,33,34,35,36,37,38,39,40,44,45,52,50,4Z,4Y,4X,4W,4V,51,4U,4T,53,54,4Q,4P]});(p(){y f=J.1h,o=f.2z;3I=p(e){f.O.2f.1m.3X=1I.2r((2d.55||1u.4M.56)-4L,57)+"2L";f.U.29();f.O.29()};3I();f.U.M.3M();J.26();J.1d();1f(y a 3V o.1c){o.1c[a].1J=J.1d}o.1X.1J=J.26;o.1d.1J=J.1d;o.1R.1J=J.1d;y b=$("4K"),1a=$("4J"),2x=2i("2C","3F",1a)[0],3J=2i("4I","3F",1a)[0];b.2w=p(e){1B("1V",1a);1C("2b",z)};b.2v=p(e){6(!1L("1P",1a)){1C("1V",1a);1B("2b",z)}};1a.2w=p(e){b.2w()};1a.2v=p(e){b.2v()};2x.1J=p(e){z.3B="./3A/"+(1L("1P",1a)?"2C":"1P")+".3P";30("1P",1a)};3J.1J=p(e){2U("1P","1V",1a);2x.3B="./3A/2C.3P"};6(3K){y c=$("4H");c.4G=p(){1C("2b",z)};c.4F=p(){1B("2b",z)};4E=p(e){f.U.1s();f.O.1s();2J(1u.5k)}}})();',62,331,'||||||if|||||||||||||||||||function|return||||||||var|this||else|length|lastToken|XRegExp|replace|type|cache|false|regexPal|match|case|textbox|call|input|errorStr|test|prototype||_captureNames|search|exec|quantifiable|indexOf|arguments|||||||openGroups|||||refBox|checked|flags|highlightMatches|substring|for|value|fields|RegExp|break|groupStyleDepth|String|style|true|className|charAt|parts|rangeable|clearBg|RANGE_HYPHEN|document|new|opening|lastIndex|output|num|index|removeClass|addClass|Fa|switch|_|id|SmartField|Math|onclick|lastLastIndex|hasClass|split|nodeName|parser|pinned|bg|invertMatches|while|class|bgEl|hidden|groupStyleStr|highlightSyntax|offsetWidth|innerHTML||NONE|closing|dA|_matchOnKeyUp|srcElement|highlightSearchSyntax||setBgHtml|setDimensions|nextToken|hover|_keydownCount|window|target|field|results|offset|getElementsByClassName|addFlags|cc_on|getTokenCharCode|ALTERNATOR|METACLASS|trim|contents|push|max|isWebKit|concat|charCodeAt|onmouseout|onmouseover|refBoxPin|default|options|floor|undefined|pin|charCode|err|capturingGroupCount|global|typeof|setTimeout|purge|extend|px|apply|source|namedBackreference|spellcheck|_onKeyUp|_onKeyDown|selectionEnd|end|swapClass|setSelectionRange|replaceSelection|selection|capturingGroup|65535|toggleClass|instanceof|characterClass||||||||multiline|getElementsByTagName|ignoreCase|dsw|cux|singleLine|parseCharacterClass|outerHTML|overwriteWithOuterHtml|width|parentNode|parseInt|9A|overwriteWithHtml|rSpace|quantifier|characterClassToken|null|characterClassParts|Array|regexToken|callee|inputStr|encodeURIComponent|regexStr|parseRegex|assets|src|bB|sansTrailingAlternator|keyCode|img|matchPair|pop|onresize|refBoxClose|isIE6|isIE|focus|extended|preventDefault|gif|_deadKeys|childNodes|_testKeyHold|_filterKeys|event|in|offsetHeight|height|replacementVariable|text||nbsp|createRange|br|||3px|marginLeft|overflowX|onkeyup|onkeydown|insertBefore|selectionStart|valueOf|Bg|Text|pre|createElement|textarea|0bBcdDfnrsStuvwWx|89|scrollWidth|replaceChild|cuxDdSsWw|cloneNode|ABCDEFGHIJKLMNOPQRSTUVWXYZ|sxk|getElementById|string|u2029|overrideNative|regex|location|u2028|permalink|real|escape|catch|slice|try|onunload|onmouseleave|onmouseenter|optionsDropdown|close|quickReference|quickReferenceDropdown|210|documentElement|flagS|flagM|145|144|flagI|flagG|121|120|118|117|116|115|114|113|119|112|122|123|innerHeight|clientHeight|60|_jscript_version|WebKit|opera|returnValue|userAgent|shiftKey|navigator|scrollHeight|name|scrollTop|attributes|select|body'.split('|'),0,{}))4
                                                                                                   

[pcetk]

As the solution was not found, here is my understanding.

 

I warn that I'm not quite a beginner with CSS.

 

Using the firefox plugin DOM inspector we can first check was is really done in term of structure when a character is highlighted.

 

We see that in fact there is no modification of the textarea. (textarea have only a bgcolor and fgcolor so it is not possible to modify them).

 

what we see is that the DOM contains under the DIV of class "smartfield" a <PRE> containing i,b elements followed by the initial textarea.

 

The content of the PRE appears in the textarea because of the definition in CSS.

.smartField pre { z-index: 1; color: rgb(249, 249, 249); }
.smartField textarea { border: 0pt none ; background: transparent none repeat scroll 0% 0%; overflow: hidden; z-index: 2; margin-left: -1px; position: absolute; top: 0pt; height: 100%; min-height: 100%; }

The z-index implies that the pre is shown before the textarea.

And I guess the position of the textarea explains that the text of the pre appears inside the text area.

 

The color is define according to the name of the div (input or search) in the css :

#input b { background: rgb(255, 240, 0) none repeat scroll 0% 0%; color: rgb(255, 240, 0); }
#input i { background: rgb(128, 192, 255) none repeat scroll 0% 0%; color: rgb(128, 192, 255); }
#search b { background: rgb(170, 209, 247) none repeat scroll 0% 0%; color: rgb(170, 209, 247); }
#search i { background: rgb(249, 202, 105) none repeat scroll 0% 0%; color: rgb(249, 202, 105); }
#search i b { background: rgb(247, 167, 0) none repeat scroll 0% 0%; color: rgb(247, 167, 0); }
#search i u { background: rgb(239, 186, 74) none repeat scroll 0% 0%; color: rgb(239, 186, 74); }
#search b.g1 { background: rgb(210, 248, 84) none repeat scroll 0% 0%; color: rgb(210, 248, 84); }
#search b.g2 { background: rgb(158, 199, 12) none repeat scroll 0% 0%; color: rgb(158, 199, 12); }
#search b.g3 { background: rgb(236, 201, 247) none repeat scroll 0% 0%; color: rgb(236, 201, 247); }
#search b.g4 { background: rgb(84, 183, 11) none repeat scroll 0% 0%; color: rgb(84, 183, 11); }
#search b.g5 { background: rgb(182, 136, 207) none repeat scroll 0% 0%; color: rgb(182, 136, 207); }
#search b.err { background: rgb(255, 67, 0) none repeat scroll 0% 0% ! important; color: rgb(255, 67, 0) ! important; }

 

 

 

Now for how this is done.

 

Reading the javascript is difficult as it is visibly an optimized source (no space, short variable names..).

 

However the creator of this interesting page left the following comment :

 

<!-- Build file includes:
<script src="./assets/xregexp.js"></script>
<script src="./assets/helpers.js"></script>
<script src="./assets/regexpal.js"></script>
-->

 

So we know what source should be read.

 

The author was even kind enough to leave the code into google code.

So I can quote easily :

The code has a good documentation.

 

How this is done : with the javascript function insertBefore, that will modify the DOM of the document in order to add the <PRE> that is not visible reading the html source.

 

http://code.google.com/p/regexpal/source/browse/trunk/assets/regexpal.js?spec=svn3&r=3#509

 

Before key events on the textarea are catched.

http://code.google.com/p/regexpal/source/browse/trunk/assets/regexpal.js#520

 

Once the PRE is added, and key event catched, after a few browser specific manipulation, the PRE element can be completed according to the regexp result.

 

http://code.google.com/p/regexpal/source/browse/trunk/assets/regexpal.js?spec=svn3&r=3#542

which is mainly using the innerHTML to the pre.

http://code.google.com/p/regexpal/source/browse/trunk/assets/helpers.js#50

 

Finally, some handling is done with respect to the textarea size.

 

 

 

 

 

[TheFilmGod]

CSS 3 enables you to change the way text looks according to the values. So in the beautiful world of CSS 3, you could do something like:

 

#text [all "(" ] {

  color: blue;

}

 

That's not the exact css code, but you get the idea. Google is your friend.