-
-
Save nblackburn/875e6ff75bc8ce171c758bf75f304707 to your computer and use it in GitHub Desktop.
module.exports = (string) => { | |
return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase(); | |
}; |
@amiceli Thanks!
Awesome, thank you @nblackburn!
Simple and elegant! Well done!
Small bug here, directives which include numbers do not convert correctly
The below fixes it:
module.exports = (string) => {
return string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
};
Thank you!
In Java:
private static String camelToKebabCase(String str) {
return str.replaceAll("([a-z0-9])([A-Z])", "$1-$2").toLowerCase();
}
A small part can be added to change how uppercase sections are transformed, e.g. HTMLInputElement
.
module.exports = (string) => {
return string
.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
.replace(/([A-Z])([A-Z])(?=[a-z])/g, '$1-$2')
.toLowerCase();
};
The above will produce html-input-element
instead of htmlinput-element
.
@csvn I really liked your version, but backed out for 2 reasons:
- Can create unexpected result with something like
HTMLBRElement
(I geek'd out and looked at all the el types) - We're using the function to map against database classes, where we should not have such a casing issue (so far?) that the ol' DOM has
I have made some tweaks to address most of the pain points outlined in this discussion.
string) => { return string .replace(/([a-z0-9])([A-Z])/g, '$1-$2') .replace(/([A-Z])([A-Z])(?=[a-z])/g, '$1-$2') .toLowerCase(); };
THANKS! handles "FooBar" -> "foo-bar" 👏🏻
@csvn perfect for me, thanks!
Stole this for a converter tool codepen: https://codepen.io/wpatter6/pen/wvweWZa
Nice! :)
UPDATED (5/6/2021):
The solution in my original comment worked in most browsers except Safari, which currently does not support lookbehind assertions in regular expressions. Here is an updated version that should work in any recent browser version, including Safari. It isn't too dissimilar from solutions posted above but does support all of the test cases outlined below, so thanks to those who posted the original solutions that got me most of the way to what I was looking for:
module.exports = (string) => {
return string
.replace(/\B([A-Z])(?=[a-z])/g, '-$1')
.replace(/\B([a-z0-9])([A-Z])/g, '$1-$2')
.toLowerCase();
};
When Safari starts supporting lookbehind assertions, the original solution would be viable for production work but I'm using the solution above until that happens.
ORIGINAL COMMENT:
Here is another one:
module.exports = (string) => {
return string.replace(/\B(?:([A-Z])(?=[a-z]))|(?:(?<=[a-z0-9])([A-Z]))/g, '-$1$2').toLowerCase();
};
It supports the following conversions (either camel or pascal case to kebab case):
fooBar -> foo-bar
FooBar -> foo-bar
AFooBar -> a-foo-bar
AFooBarACRONYM -> a-foo-bar-acronym
ACRONYMFooBar -> acronym-foo-bar
FooACRONYMBar -> foo-acronym-bar
ACRONYMFooACRONYMBarACRONYM -> acronym-foo-acronym-bar-acronym
ACRONYM1Foo1ACRONYM2Bar1ACRONYM3 -> acronym1-foo1-acronym2-bar1-acronym3
Here is another one:
module.exports = (string) => { return string.replace(/\B(?:([A-Z])(?=[a-z]))|(?:(?<=[a-z0-9])([A-Z]))/g, '-$1$2').toLowerCase(); };It supports the following conversions (either camel or pascal case to kebab case):
fooBar -> foo-bar FooBar -> foo-bar AFooBar -> a-foo-bar AFooBarACRONYM -> a-foo-bar-acronym ACRONYMFooBar -> acronym-foo-bar FooACRONYMBar -> foo-acronym-bar ACRONYMFooACRONYMBarACRONYM -> acronym-foo-acronym-bar-acronym ACRONYM1Foo1ACRONYM2Bar1ACRONYM3 -> acronym1-foo1-acronym2-bar1-acronym3
unluckily it's not support in Safari :(
unluckily it's not support in Safari :(
I was curious why.... so here is why.
https://stackoverflow.com/a/51568859
Looks like Safari doesn't support lookbehind yet (that is, your (?<=/)).
@bradgreens @ibockowsky Yeah, I should have reported back when I found out about lack of support with lookbehind assertions in Safari. I ran into that during browser testing too.
I've updated my original comment with what I used to get around Safari's lack of lookbehind assertion support.
Nice !