473,747 Members | 2,280 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

RegExp for hyphen to camelCase?


I'm messing with getPropertyValu e (Mozilla et al) and currentStyle (IE)
and have a general function (slightly modified from one originally
posted by Steve van Dongen) for getting style properties:

function GetCurrentStyle ( el, prop ) {
if ( window.getCompu tedStyle ) {
// Mozilla et al
return window.getCompu tedStyle(el, '').getProperty Value(prop) );
} // IE5+
else if ( el.currentStyle ) {
return el.currentStyle[prop];
} // IE4
else if ( el.style ) {
return el.style[prop];
}
}

If property names have no hyphen (e.g. width, height) then all is fine.
But with hyphenated names (e.g. margin-right, border-top) Mozilla
wants them unmodified and IE wants them camelCased (marginRight, borderTop).

Is there a simple RegExp that will camelCase hyphenated strings? I can
do it with a loop and string operations but would prefer to use a single
RegExp if possible.

The following works fine using substring (for s having 0 or more
hyphens) but is there a simpler way?

function toCamel ( s ) {
s = s.split('-');
var i=0, j=s.length;
while ( ++i < j ) {
s[0] += s[i].substring(0,1) .toUpperCase() + s[i].substring(1);
}
return s[0];
}

I've tried using RegExp but can't get a simple expression without
looping - property names have up to 3 (or more? three-d-light-shadow)
hyphens, a RegExp with global flag should be possible.

Any suggestions?

--
Rob
Jul 23 '05 #1
20 3539
VK


RobG wrote:
I'm messing with getPropertyValu e (Mozilla et al) and currentStyle (IE)
and have a general function (slightly modified from one originally
posted by Steve van Dongen) for getting style properties:

function GetCurrentStyle ( el, prop ) {
if ( window.getCompu tedStyle ) {
// Mozilla et al
return window.getCompu tedStyle(el, '').getProperty Value(prop) );
} // IE5+
else if ( el.currentStyle ) {
return el.currentStyle[prop];
} // IE4
else if ( el.style ) {
return el.style[prop];
}
}

If property names have no hyphen (e.g. width, height) then all is fine.
But with hyphenated names (e.g. margin-right, border-top) Mozilla
wants them unmodified and IE wants them camelCased (marginRight, borderTop).

Is there a simple RegExp that will camelCase hyphenated strings? I can
do it with a loop and string operations but would prefer to use a single
RegExp if possible.

The following works fine using substring (for s having 0 or more
hyphens) but is there a simpler way?

function toCamel ( s ) {
s = s.split('-');
var i=0, j=s.length;
while ( ++i < j ) {
s[0] += s[i].substring(0,1) .toUpperCase() + s[i].substring(1);
}
return s[0];
}

I've tried using RegExp but can't get a simple expression without
looping - property names have up to 3 (or more? three-d-light-shadow)
hyphens, a RegExp with global flag should be possible.

Any suggestions?

--

The pattern search would be simple:

var re = /(-)([a-z])/g;

hyphenString.re place(re,"$2");

This would transform "a-b-c" to "abc"

Unfortunately back to NN4 they have forgotten to include in
JavaScript's RegExp the case transformation sequences (\u and \U). And
so far no one bothered to fix it. So there is no way to transform
"a-b-c" to "aBC" other than using .exec method, pass through all
matches and apply toUpperCase() with string re-assemply each time.

In this case the old charAt/substring method *much* more time/ressource
effective :-(

Jul 23 '05 #2
I would agree with VK's comments.

Taking from both your comments you could try this at least:-

var s="three-d-light-shadow";
var r=/(-)([a-z])/g;
s=s.replace(r,f unction(a,b,c){ return c.toUpperCase() ;});
alert(s);

Jul 23 '05 #3
fox


RobG wrote:

I'm messing with getPropertyValu e (Mozilla et al) and currentStyle (IE)
and have a general function (slightly modified from one originally
posted by Steve van Dongen) for getting style properties:

function GetCurrentStyle ( el, prop ) {
if ( window.getCompu tedStyle ) {
// Mozilla et al
return window.getCompu tedStyle(el, '').getProperty Value(prop) );
} // IE5+
else if ( el.currentStyle ) {
return el.currentStyle[prop];
} // IE4
else if ( el.style ) {
return el.style[prop];
}
}

If property names have no hyphen (e.g. width, height) then all is fine.
But with hyphenated names (e.g. margin-right, border-top) Mozilla wants
them unmodified and IE wants them camelCased (marginRight, borderTop).

Is there a simple RegExp that will camelCase hyphenated strings? I can
do it with a loop and string operations but would prefer to use a single
RegExp if possible.

The following works fine using substring (for s having 0 or more
hyphens) but is there a simpler way?

function toCamel ( s ) {
s = s.split('-');
var i=0, j=s.length;
while ( ++i < j ) {
s[0] += s[i].substring(0,1) .toUpperCase() + s[i].substring(1);
}
return s[0];
}

I've tried using RegExp but can't get a simple expression without
looping - property names have up to 3 (or more? three-d-light-shadow)
hyphens, a RegExp with global flag should be possible.

Any suggestions?


function
toCamel(s)
{
var re = /(-)(\w)/g;

return s.replace(re,
function(fullma tch,paren1,pare n2)
{
return paren2.toUpperC ase();
});
}

Jul 23 '05 #4
VK
> var s="three-d-light-shadow";
var r=/(-)([a-z])/g;
s=s.replace(r,f unction(a,b,c){ return c.toUpperCase() ;});
alert(s);


That's an absolutely cool twist!
Flushing substring !

Jul 23 '05 #5
It does enable you to be quite concise.

Oddly though, I have found that if you use this type of technique on
very large strings, it actually becomes much more inefficient than
ordinary String concatenation or Array joining, by quite a margin. For
a 200k string, String concatenation is about 10x faster. But for small
Strings can be quite useful.

Jul 23 '05 #6
VK
> Oddly though, I have found that if you use this type of technique on
very large strings, it actually becomes much more inefficient than
ordinary String concatenation or Array joining, by quite a margin. For
a 200k string, String concatenation is about 10x faster.


it's not so odd because regexp's are very resource intensive. So on big
texts it takes *a lot*. In some serious implementations of regexp's
there is study() method to "prepare" a large text for regexp
processing.

IE introduced re.compile() method to convert static regexp to binary
code for maximum speed. Did you try that?

Jul 23 '05 #7
>it's not so odd because regexp's are very resource intensive. So on big
texts it takes *a lot*.
I can see how that would be.
I suppose jumping out of the process to call a function will not help
either.
IE introduced re.compile() method to convert static regexp to binary
code for maximum speed. Did you try that?


No I didn't. I'll give it a try. Thanks.

Jul 23 '05 #8
Baconbutty wrote:
I would agree with VK's comments.

Taking from both your comments you could try this at least:-

var s="three-d-light-shadow";
var r=/(-)([a-z])/g;
s=s.replace(r,f unction(a,b,c){ return c.toUpperCase() ;});
alert(s);


Cool, unfortunately Safari doesn't like it, returning:

threefunction (a, b, c)
{
return c.toUpperCase() ;
}function (a, b, c)
{
return c.toUpperCase() ;
}ightfunction (a, b, c)
{
return c.toUpperCase() ;
}hadow

It is returning the function body rather than the result - similarly
for Fox's suggestion.

So thanks, but I'll have to stick with looping for now. Hopefully
style property names will never reach 200k ;-)
--
Rob
Jul 23 '05 #9
On 21/07/2005 12:39, RobG wrote:
Baconbutty wrote:
[Use a function argument]
Cool, unfortunately Safari doesn't like it, [...]

It is returning the function body rather than the result - similarly for
Fox's suggestion.
So will IE5 and earlier as they don't support function arguments, and
Opera 6 won't perform a replacement at all (a no-op).
So thanks, but I'll have to stick with looping for now. [...]


It takes about 2KB to replace the replace method. :)

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.
Jul 23 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
1768
by: John Benson | last post by:
I never cared for CamelCase because a lot of words in English are compounds, and remembering the right CamelCase rendition of them gets difficult. For example, an object attribute named HaveAMerryChristmas isn't too hard, but what about deciding between HaveAGoodWeekend
5
2057
by: Syed Ali | last post by:
Hello, I am trying to create a regexp to express non letters and space. I tried using: var myreg = new RegExp (""); However, it is not working. Basically I want to allow only words with letters in a textfield, space is ok, but no special characters such as $%^ or numbers such as
27
31419
by: The Bicycling Guitarist | last post by:
Hi. I found the following when trying to learn if there is such a thing as a non-breaking hyphen. Apparently Unicode has a ‑ but that is not well-supported, especially in older browsers. Somebody somewhere said: Alternately, you can use CSS to declare a class having: ..nowrap { white-space:nowrap } .... and then wrap the compound word in a <span class=nowrap></span> tag (or any other suitable inline tag). You can also try {...
13
49884
by: Matt | last post by:
I would like to set the "list-style-type" to be a hyphen (-). How can I accomplish this in a style sheet. I tried list-style-type: hyphen; and list-style-type: dash; but neither worked. I also tried adding this to the style sheet (with the list-style-type set to none in the UL element). LI:Before { content: "- "; }
12
5024
by: Dag Sunde | last post by:
My understanding of regular expressions is rudimentary, at best. I have this RegExp to to a very simple validation of an email-address, but it turns out that it refuses to accept mail-addresses with hypens in them. Can anybody please help me adjust it so it will accept addresses like dag-sunde@test-domain.net too?
4
4557
by: Rubin | last post by:
1) I want to show a breaking hyphen in Mozilla 1.5.0.4 How do I do that? "Unicode standard annex #14", <http://www.unicode.org/reports/tr14/>, defines 4 breaking hyphens. <quote> Breaking hyphens establish explicit break opportunities immediately after each occurrence.
9
34791
by: Laphan | last post by:
Hi All I'm using the below to limit the input into a text box to just letters, numbers, hyphens and full stops, but I also need to allow the backspace, delete and arrow keys to come through. How can I do this? <script language="JavaScript" type="text/javascript"> <!-- function onKeyPressBlockNumbers(e) {
3
1431
by: durumdara | last post by:
Hi! I want to replace some seqs. in a html. Let: a- b = ab but: xxx -
5
2143
by: gentsquash | last post by:
In a setting where I can specify only a JS regular expression, but not the JS code that will use it, I seek a regexp component that matches a string of letters, ignoring case. E.g, for "cat" I'd like the effect of () but without having to have many occurrences of .
0
8979
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8818
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9522
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
9307
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
6790
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4589
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4860
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2773
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2203
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.