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

commented Aug 24, 2017

Nice !

@nblackburn

This comment has been minimized.

Copy link
Owner Author

commented Sep 16, 2017

@amiceli Thanks!

@maximelafarie

This comment has been minimized.

Copy link

commented Dec 19, 2017

Awesome, thank you @nblackburn!

@Mobiletainment

This comment has been minimized.

Copy link

commented Mar 14, 2018

Simple and elegant! Well done!

@blemaire

This comment has been minimized.

Copy link

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

commented Jul 26, 2018

Thank you!

@tedconn

This comment has been minimized.

Copy link

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

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

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

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

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

commented Aug 27, 2019

@csvn perfect for me, thanks!

@wpatter6

This comment has been minimized.

Copy link

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.