469,935 Members | 1,600 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

RegExp() to strip comments in CSS?


I'm not really an expert with RegExp() , although I do use it.
The problem I have is that I want to strip comments out of a CSS
file using RegExp()

The reason is that I'm loading and parsing to simulate javscript
access to stylesheets in Opera. I thought I had it licked untill the
'/' characters in url('') tripped me up

Below is a test case. I've tried many things. but if I can't
figure out a nice clean RegExp(), I'm going to have to do it
old-school. Any thoughts?
/*
** A multi-line comment
*/

/* a single line comment */
..tester {
background:url('http://www.somewhere.com/Images/space.jpg');
border-top :1px solid black;
border-bottom :1px solid black;
border-right :1px solid black;
border-left :1px solid black;
}
--
--.
--=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML/CSS,Javascript,TCP ...
--`
Sep 8 '05 #1
19 3326
Dr Clue wrote on 09 sep 2005 in comp.lang.javascript:

I'm not really an expert with RegExp() , although I do use it.
The problem I have is that I want to strip comments out of a CSS
file using RegExp()

The reason is that I'm loading and parsing to simulate javscript
access to stylesheets in Opera. I thought I had it licked untill the
'/' characters in url('') tripped me up

Below is a test case. I've tried many things. but if I can't
figure out a nice clean RegExp(), I'm going to have to do it
old-school. Any thoughts?
/*
** A multi-line comment
*/

/* a single line comment */

str = 'aaa /* qqq*/ aaa'

str = str.replace(/\/\*[\s\S]*?(\*\/)/,'')

alert(str)
str = 'aaa /* \n qqq \n */ aaa'

str = str.replace(/\/\*[\s\S]*?(\*\/)/,'')

alert(str)

IE6 tested

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Sep 8 '05 #2
Thankyou for responding Evertjan
I tried your example , and it did indeed work with the
little test case, but it appears the test case was shy of the mark
so heres the actual file in question that I'm attempting to
strip the comments from, as it did not fair so well.
/* File : jsMENUlib.css
** Author : Dr. Clue ( A.K.A. Ian A. Storms )
** Description : This is where you control the general appearance of
** the menus, and their menupads.
*/

/* The normal display appearance of the menu panel as opposed to the
menu pads
*/
..jsMenuPanel {
background :url('http://www.drclue.net/Assets/Images/paper/space.jpg');
border-top :1px solid black;
border-bottom :1px solid black;
border-right :1px solid black;
border-left :1px solid black;
}
/* The normal display appearance of an un-highlighted menu pad
*/
..jsMenupadLO {
font-size :12pt ;
color :#ffffcc ;
background-color :transparent ;
display :block ;
border :1px solid black;
}
/* The highlighted display appearance of a pad with the mouse over it
*/
..jsMenupadHI {
background :url('http://www.drclue.net/Assets/Images/paper/spaceLT.jpg');
font-size :12pt ;
color :#ffff00 ;
/* background-color :#99aabb ;
*/
display :block ;
border :1px solid black;
}
/* The disabled appearance of an un-highlighted menu pad ( no XML Action
value).*/
..jsMenupadGRY {
/* padding :2px ;
*/
font-size :12pt ;
color :#999999 ;
background-color :#99aabb ;
display :block ;
border :1px solid black;
}

--
--.
--=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML/CSS,Javascript,TCP ...
--`
Sep 8 '05 #3
Dr Clue wrote on 09 sep 2005 in comp.lang.javascript:
Thankyou for responding Evertjan
I tried your example,
This is usenet. Other peaple are reading to ant don't want to search for
the last posting, so netiquette says: always quote relevant part that
posting
and it did indeed work with the
little test case, but it appears the test case was shy of the mark
so heres the actual file in question that I'm attempting to
strip the comments from,
Indeed, I dit tell you regex only works on strings, not on files, so the
first thing you would have to do is look into the way you convert your file
to a string, Ian. And what system you are you are using, since perhaps the
newline representation could not be recognized in the conversion to a
string.
as it did not fair so well.
This is rather criptic. I don't know what to answer on that.
Please elaborate on this beautified "doesn't work".


/* File : jsMENUlib.css
[...]


So in your testphase, please include relevant part of your js-file as a
string litteral.

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Sep 9 '05 #4
Evertjan. wrote:
Dr Clue wrote on 09 sep 2005 in comp.lang.javascript:
Thankyou for responding Evertjan
I tried your example,
This is usenet. Other peaple are reading to ant don't want to search for
the last posting, so netiquette says: always quote relevant part that
posting


Firstly , I'd like to appologize if you think I was impuning your
skills or the like, as that was cetainly not the case. I really
did mean that my test sample was shy of the mark.
Indeed, I dit tell you regex only works on strings, not on files, so the
first thing you would have to do is look into the way you convert your file
to a string, Ian. And what system you are you are using, since perhaps the
newline representation could not be recognized in the conversion to a
string.
I retrieved the CSS file via XMLHTTP.
So in your testphase, please include relevant part of your js-file as a
string litteral.


The file I pasted into the previous message was the retrieved content.
I have since written a two line old school ditty to do the task,
but I still want to figure out how to make it happen in RegExp(),
preferably in a single expression.

As I said I'm no RegExp() expert. The only use I've ever really
put regular expressions to was massaging various large text databases
from one form to another.

RegExp() appeared in browsers while I was going through a few years
of hospitals and surgeories , It's only in the last month or
so that I'm getting back to programming and theres a lot of
catching up to do.

--
--.
--=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML/CSS,Javascript,TCP ...
--`
Sep 9 '05 #5
Dr Clue wrote on 09 sep 2005 in comp.lang.javascript:
I retrieved the CSS file via XMLHTTP.
So in your testphase, please include relevant part of your js-file as a
string litteral.


The file I pasted into the previous message was the retrieved content.


No it was not because it was not a javascript litteral string, but the
result of your pasting it in your news-client.

I have no idea what the new line code or codes were.

So first convert your input into a javascript litteral and then
do the regex on that litteral string, ian.

And then please explain what the results where, even if not satisfactory.

I wrote before:
as it did not fair so well.


This is rather criptic. I don't know what to answer on that.
Please elaborate on this beautified "doesn't work".


Please elaborate.

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Sep 9 '05 #6
"Evertjan." <ex**************@interxnl.net> writes:
Dr Clue wrote on 09 sep 2005 in comp.lang.javascript:
I retrieved the CSS file via XMLHTTP. .... The file I pasted into the previous message was the retrieved content.
No it was not because it was not a javascript litteral string, but the
result of your pasting it in your news-client.


Strings don't have to be literals. If you retrieve it using a
XMLHTTPRequest, you will just get the content - and that is what was
posted. No literals required.
Anyway, try adding a "g" after the regexp Evertjan gave, i.e., something
like:
content.replace(/\/\*[\s\S]*?\*\//g,"")
That should remove more than one comment.

(Actually, there is a problem if a comment like character sequence
occurs inside a string literal, where it won't count as a comment.
Probably won't happen in practice, though :)

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Sep 9 '05 #7
JRS: In article <E3****************@newsread2.news.pas.earthlink.n et>,
dated Thu, 8 Sep 2005 22:38:28, seen in news:comp.lang.javascript, Dr
Clue <ia*********@mindspring.com> posted :

I'm not really an expert with RegExp() , although I do use it.
The problem I have is that I want to strip comments out of a CSS
file using RegExp()

The reason is that I'm loading and parsing to simulate javscript
access to stylesheets in Opera. I thought I had it licked untill the
'/' characters in url('') tripped me up

Below is a test case. I've tried many things. but if I can't
figure out a nice clean RegExp(), I'm going to have to do it
old-school. Any thoughts?


ISTM that you will want a non-greedy RegExp.

Otherwise, perhaps indexOf for /*, move up to there to the output,
indexOf for */, delete up to there, and in each case if not found
retain/delete the line.

Another approach could be to discover two characters never used in CSS -
represented *here* by < > - maybe specifying them in UniCode, then first
replace all /* with < and */ with >. Now that the closing delimiter is
a single character you can get the non-greedy effect with comment being
<[^>]*> .

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Sep 9 '05 #8
Evertjan. wrote:
Dr Clue wrote on 09 sep 2005 in comp.lang.javascript:
No it was not because it was not a javascript litteral string, but the
result of your pasting it in your news-client.
I have no idea what the new line code or codes were.
Thankyou for your patience.
OK, the line terminations were '\r\n'

The material being parsed was never a literal if by same you
mean "literal\r\nline", but rather just the xmlHTTP.responseText
tossed about in memory
So first convert your input into a javascript litteral and then
do the regex on that litteral string, ian.
OK , so with a little split/join I created the fallowing string literal
and fed it back into the expressions provided

"/*\tFile\t\t:\tjsMENUlib.css\r\n**\tAuthor\t\t:\tDr . Clue\t( A.K.A. Ian
A. Storms )\r\n**\tDescription\t:\tThis is where you control the general
appearance of\r\n**\t\t\tthe menus, and their menupads.\r\n*/\r\n\r\n/*
The normal display appearance of the menu panel as opposed to the menu
pads\r\n*/\r\n.jsMenuPanel\t{\r\n\t\tbackground\t\t:url('htt p://www.drclue.net/Assets/Images/paper/space.jpg');\r\n\t\tborder-top\t\t:1px
solid black;\r\n\t\tborder-bottom\t\t:1px solid
black;\r\n\t\tborder-right\t\t:1px solid
black;\r\n\t\tborder-left\t\t:1px solid black;\r\n\t\t}\r\n/* The normal
display appearance of an un-highlighted menu
pad\r\n*/\r\n.jsMenupadLO\t{\r\n\t\tfont-size\t\t:12pt\t\t;\r\n\t\tcolor\t\t\t:#ffffcc\t;\r \n\t\tbackground-color\t:transparent\t;\r\n\t\tdisplay\t\t\t:block\ t\t;\r\n\t\tborder\t\t\t:1px
solid black;\r\n\t\t}\r\n/* The highlighted display appearance of a pad
with the mouse over
it\r\n*/\r\n.jsMenupadHI\t{\r\n\t\tbackground\t\t:url('htt p://www.drclue.net/Assets/Images/paper/spaceLT.jpg');\r\n\t\tfont-size\t\t:12pt\t\t;\r\n\t\tcolor\t\t\t:#ffff00\t;\r \n/*\t\tbackground-color\t:#99aabb\t;\r\n*/\r\n\t\tdisplay\t\t\t:block\t\t;\r\n\t\tborder\t\t \t:1px
solid black;\r\n\t\t}\r\n/* The disabled appearance of an un-highlighted
menu pad ( no XML Action
value).*/\r\n.jsMenupadGRY\t{\r\n/*\t\tpadding\t\t\t:2px\t\t;\r\n*/\r\n\t\tfont-size\t\t:12pt\t\t;\r\n\t\tcolor\t\t\t:#999999\t;\r \n\t\tbackground-color\t:#99aabb\t;\r\n\t\tdisplay\t\t\t:block\t\t; \r\n\t\tborder\t\t\t:1px
solid black;\r\n\t\t}\r\n"
And then please explain what the results where, even if not satisfactory.

The result did strip out the first header. but not subsequent ones.
As I'm typing this , I'm conjecturing that maybe some sort of global
switch or something is required, but I've been guessing at things for
days on this, reading RegExp documentation till my mind is numb.
..jsMenuPanel {
background :url('http://www.drclue.net/Assets/Images/paper/space.jpg');
border-top :1px solid black;
border-bottom :1px solid black;
border-right :1px solid black;
border-left :1px solid black;
}
/* The normal display appearance of an un-highlighted menu pad
*/
..jsMenupadLO {
font-size :12pt ;
color :#ffffcc ;
background-color :transparent ;
display :block ;
border :1px solid black;
}
/* The highlighted display appearance of a pad with the mouse over it
*/
..jsMenupadHI {
background :url('http://www.drclue.net/Assets/Images/paper/spaceLT.jpg');
font-size :12pt ;
color :#ffff00 ;
/* background-color :#99aabb ;
*/
display :block ;
border :1px solid black;
}
/* The disabled appearance of an un-highlighted menu pad ( no XML Action
value).*/
..jsMenupadGRY {
/* padding :2px ;
*/
font-size :12pt ;
color :#999999 ;
background-color :#99aabb ;
display :block ;
border :1px solid black;
}

--
--.
--=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML/CSS,Javascript,TCP ...
--`
Sep 9 '05 #9
Dr John Stockton wrote:
<snip>
The problem I have is that I want to strip comments out of a CSS
file using RegExp()

The reason is that I'm loading and parsing to simulate javscript
access to stylesheets in Opera. I thought I had it licked untill the
'/' characters in url('') tripped me up
<snip> ISTM that you will want a non-greedy RegExp.

Otherwise, perhaps indexOf for /*, move up to there to the output,
indexOf for */, delete up to there, and in each case if not found
retain/delete the line.

Another approach could be to discover two characters never used in CSS -
represented *here* by < > - maybe specifying them in UniCode, then first
replace all /* with < and */ with >. Now that the closing delimiter is
a single character you can get the non-greedy effect with comment being
<[^>]*> .


While still trying to solve this RegExp puzzle, I tossed togeather
this old-school stand-in till the regex puzzle is solved
for(iF=0,iT=0;(iF=szCode.indexOf("/*"))<(iT=szCode.indexOf("*/")); )
if(iF>-1&&iT>2)szCode=szCode.substring(0,iF)+szCode.subst ring(iT+2)

It's my belief (and I could be wrong ) that a good regex
could probably do the job in a single expression.

But heck your thinking some of the same thoughts I had, so I don't
feel near as badly at having wrestled this for days

Thanks for the input, it's all good.


--
--.
--=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML/CSS,Javascript,TCP ...
--`
Sep 9 '05 #10
Lasse Reichstein Nielsen wrote:
"Evertjan." <ex**************@interxnl.net> writes:
Dr Clue wrote on 09 sep 2005 in comp.lang.javascript:
I retrieved the CSS file via XMLHTTP.
The file I pasted into the previous message was the retrieved content.

No it was not because it was not a javascript litteral string, but the
result of your pasting it in your news-client.


Strings don't have to be literals. If you retrieve it using a
XMLHTTPRequest, you will just get the content - and that is what was
posted. No literals required.

Anyway, try adding a "g" after the regexp Evertjan gave, i.e., something
like:
content.replace(/\/\*[\s\S]*?\*\//g,"")
That should remove more than one comment.

(Actually, there is a problem if a comment like character sequence
occurs inside a string literal, where it won't count as a comment.
Probably won't happen in practice, though :)


I was suspecting the global aspect. The global flag syntax was
what was missing, and actually the final solution of putting
your response and Evertjan's efforts togeather is [drum roll please...]

[ stripping /* */ comments from CSS stylesheet sourcecode is ]
szCodeOut = szCodeOut.replace(/\/\*[\s\S]*?(\*\/)/g,'')
Thankyou both , it probably saved me a day or two
more of feeling stupid.


--
--.
--=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML/CSS,Javascript,TCP ...
--`
Sep 9 '05 #11
JRS: In article <fy**********@hotpop.com>, dated Fri, 9 Sep 2005
21:51:24, seen in news:comp.lang.javascript, Lasse Reichstein Nielsen
<lr*@hotpop.com> posted :

Anyway, try adding a "g" after the regexp Evertjan gave, i.e., something
like:
content.replace(/\/\*[\s\S]*?\*\//g,"")
That should remove more than one comment.

(Actually, there is a problem if a comment like character sequence
occurs inside a string literal, where it won't count as a comment.
Probably won't happen in practice, though :)


Well, your RegExp literal contains a javascript comment-to-end-of-line
introducer - granted, not the same, but it does show that all sorts of
things appear in literals. Bur he's processing CSS, which is simpler.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Sep 10 '05 #12
Dr John Stockton wrote:
<big snip>
Bur he's processing CSS, which is simpler.


The ultimate goal (which I've now accomplished) is to convert
a CSS file into a javascript object on-the-fly, so that
my DHTML library can have derrived applications configured
via CSS without falling down in Opera where Opera's
javascript can't *see* the stylesheet entries.

I've just a little more packaging to do to merge
the finished code into my jsDHTMLlib.js library.

--
--.
--=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML/CSS,Javascript,TCP ...
--`
Sep 10 '05 #13
Dr Clue wrote:
[...]


s = s.replace(/\/\*([^*]|\*[^\/])*\*\//g, "");
PointedEars
--
Let us not judge others because of their religion, color or nationality.
We are all just human beings living together on this planet. (poehoe.de)
Oct 16 '05 #14
Thomas 'PointedEars' Lahn <Po*********@web.de> writes:
Dr Clue wrote:
[...]


s = s.replace(/\/\*([^*]|\*[^\/])*\*\//g, "");


Fails on s="a/*...**/b". Negative matching is a bitch :)

With non-greedy matching, the easiest way is:
/\/\*.*?\*\//g

Without that, it's a lot harder:
Try
/\/\*[^*]*\*+([^*\/][^*]*\*+)*\//g

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Oct 17 '05 #15
Lasse Reichstein Nielsen wrote:
With non-greedy matching, the easiest way is:
/\/\*.*?\*\//g


No, with non-greedy matching you actually want:

/\/\*(.|\n)*?\*\//g

otherwise you won't pick up comments with newlines in them.
Oct 17 '05 #16
Lasse Reichstein Nielsen wrote:
Thomas 'PointedEars' Lahn <Po*********@web.de> writes:
Dr Clue wrote:
[...]
s = s.replace(/\/\*([^*]|\*[^\/])*\*\//g, "");


Fails on s="a/*...**/b". Negative matching is a bitch :)


Indeed. Thanks for pointing out and saving me several nights of debugging.
Could you elaborate why it does not work with `**/'?
Without [non-greedy matching], it's a lot harder:
Try
/\/\*[^*]*\*+([^*\/][^*]*\*+)*\//g


Eeek :)
\V/ PointedEars
Oct 17 '05 #17
>>> s = s.replace(/\/\*([^*]|\*[^\/])*\*\//g, "");
Fails on s="a/*...**/b". Negative matching is a bitch :)
Indeed. Thanks for pointing out and saving me several nights of debugging.
Could you elaborate why it does not work with `**/'?


It fails here: \*[^\/]

This must match a * -and- one character which satisfies [^\/], which
could be another *.

So if you have **/ it will match both the **, and so prevent the final
*\// from matching anything because there will be no stars left.

Oct 17 '05 #18
Thomas 'PointedEars' Lahn <Po*********@web.de> writes:
Lasse Reichstein Nielsen wrote:
Thomas 'PointedEars' Lahn <Po*********@web.de> writes:
s = s.replace(/\/\*([^*]|\*[^\/])*\*\//g, "");


Fails on s="a/*...**/b". Negative matching is a bitch :)


Indeed. Thanks for pointing out and saving me several nights of debugging.
Could you elaborate why it does not work with `**/'?


Because there is no way to match it :)
Seriously, if you read the pattern out, it goes something like:

slash, followed by asterisk, followed by
zero or more of
either a non-asterisk
or an asterisk followed by a non-slash
followed by astrisk, followd by slash.

The tree middle lines describe the contents of a comment, while the
first and last describe the delimiter.

Reading the middle part, there is no way the contents can end with
a non-asterisk followed by an asterisk. Asterisks in the content
must be either followed by something (a non-slash) or preceeded
by an asterisk.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Oct 17 '05 #19
JRS: In article <hd**********@hotpop.com>, dated Mon, 17 Oct 2005
03:06:13, seen in news:comp.lang.javascript, Lasse Reichstein Nielsen
<lr*@hotpop.com> posted :
Thomas 'PointedEars' Lahn <Po*********@web.de> writes:
Dr Clue wrote:
[...]


s = s.replace(/\/\*([^*]|\*[^\/])*\*\//g, "");


Fails on s="a/*...**/b". Negative matching is a bitch :)


The original post is about a month old or more; there's no point in
replying to it, and Thomas Lahn's other errors may already have been
pre-empted. We dealt with the OP on or around 9th September.

Consider first replacing all /* by C1 & */ by C2, and // by C3 where C1
C2 and C3 are characters not present in the CSS - maybe \u0001 \u0002
\u0003 or £ ¥ §. ISTM that the search will now be easier.

Note that
C3 does not introduce comment if between C1 and C2
C1 does not introduce comment if after C3
C2 does not terminate comment if after C3
and that's not all.

A simpler task is to remove comment from CSS that's written with
restricted comment : no C1 or C3 in C1 ... C2, no C1 after C3.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME ©
Web <URL:http://www.uwasa.fi/~ts/http/tsfaq.html> -> Timo Salmi: Usenet Q&A.
Web <URL:http://www.merlyn.demon.co.uk/news-use.htm> : about usage of News.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.
Oct 18 '05 #20

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Lukas Holcik | last post: by
9 posts views Thread by Hendrik Wendler | last post: by
39 posts views Thread by Timex | last post: by
11 posts views Thread by James Hu | last post: by
100 posts views Thread by jacob navia | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.