Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Convert a string from camel case to kebab case.
module.exports = (string) => {
return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
};
@amiceli

This comment has been minimized.

Copy link

amiceli commented Aug 24, 2017

Nice !

@nblackburn

This comment has been minimized.

Copy link
Owner Author

nblackburn commented Sep 16, 2017

@amiceli Thanks!

@maximelafarie

This comment has been minimized.

Copy link

maximelafarie commented Dec 19, 2017

Awesome, thank you @nblackburn!

@Mobiletainment

This comment has been minimized.

Copy link

Mobiletainment commented Mar 14, 2018

Simple and elegant! Well done!

@blemaire

This comment has been minimized.

Copy link

blemaire commented May 14, 2018

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();
};
@lwxbr

This comment has been minimized.

Copy link

lwxbr commented Jul 26, 2018

Thank you!

@tedconn

This comment has been minimized.

Copy link

tedconn commented Nov 8, 2018

In Java:

private static String camelToKebabCase(String str) {
    return str.replaceAll("([a-z0-9])([A-Z])", "$1-$2").toLowerCase();
}
@csvn

This comment has been minimized.

Copy link

csvn commented Mar 28, 2019

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.

@bradgreens

This comment has been minimized.

Copy link

bradgreens commented Jun 5, 2019

@csvn I really liked your version, but backed out for 2 reasons:

  1. Can create unexpected result with something like HTMLBRElement (I geek'd out and looked at all the el types)
  2. 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
@nblackburn

This comment has been minimized.

Copy link
Owner Author

nblackburn commented Jun 6, 2019

I have made some tweaks to address most of the pain points outlined in this discussion.

@steve-ross

This comment has been minimized.

Copy link

steve-ross commented Aug 8, 2019

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" 👏🏻

@pastukh-dm

This comment has been minimized.

Copy link

pastukh-dm commented Aug 27, 2019

@csvn perfect for me, thanks!

@wpatter6

This comment has been minimized.

Copy link

wpatter6 commented Aug 28, 2019

Stole this for a converter tool codepen: https://codepen.io/wpatter6/pen/wvweWZa

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.