JS: convert to kebab-case

convert-to-kebab-case.js

const convertToKebabCase = (string) => {
  return string.replace(/\s+/g, '-').toLowerCase();
}

return string.replace(/([a-z])([A-Z])/g, "$1-$2")
             .replace(/\s+/g, '-')
             .toLowerCase();

could be used to handle Caml cased input as well

@Tiliavir 's solution works well

const kebabCase = string => string.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/\s+/g, '-').toLowerCase()

it should include low dash as well for a better conversion

str
  .replace(/([a-z])([A-Z])/g, '$1-$2')    // get all lowercase letters that are near to uppercase ones
  .replace(/[\s_]+/g, '-')                // replace all spaces and low dash
  .toLowerCase()                          // convert to lower case

Some examples:

radius changed -> radius-changed
radiusChanged -> radius-changed
radius_changed -> radius-changed
raDiuScHan_ge d -> ra-diu-sc-han-ge-d

this is awesome! since i'm using it in my Lodash replacement library, i'll link back here ;)

None of these solutions work for ThisIsATest, it becomes this-is-atest instead of this-is-a-test

str
  .replace(/([A-Z])([A-Z])/g, '$1-$2')
  .replace(/([a-z])([A-Z])/g, '$1-$2')
  .replace(/[\s_]+/g, '-')            
  .toLowerCase()  

"thisIsATest"
  .replace(/([A-Z])([A-Z])/g, '$1-$2')
  .replace(/([a-z])([A-Z])/g, '$1-$2')
  .replace(/[\s_]+/g, '-')            
  .toLowerCase()
// "this-is-a-test"

None of those exemples are good enough, they miss special chars like comma and parens.

See https://www.w3resource.com/javascript-exercises/fundamental/javascript-fundamental-exercise-123.php for one that actually does work as expected.

const toKebabCase = str =>
    str &&
    str
      .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
      .map(x => x.toLowerCase())
      .join('-');

@Vadorequest great code, could you also filter out —   etc?

Unfortunately, I'm not really good at regexes, I just found out a better version and shared it but ain't competent for improving it.

Some small improvements (perhaps some personal taste involved, as well):

const kebabCase = str => str.match(/[A-Z]{2,}(?=[A-Z][a-z0-9]*|\b)|[A-Z]?[a-z0-9]*|[A-Z]|[0-9]+/g)
  .filter(Boolean)
  .map(x => x.toLowerCase())
  .join('-')

What @Vadorequest provided would cut off a word at any digit followed by a letter, and this solution allows those digits to fall within words like so:
Previously: Som3thing\3lse => som3-thing-3-lse
My version: Som3thing\3lse => som3thing-3lse

@tehpsalmist Could you edit your post to provide an example with your regex vs mine? That'd be even better ;)
I like yours, may indeed be an improvement! But could depend on the needs.

Just adding to this conversation:

function kebabCase (str) {
  const result = str.replace(
    /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,
    match => '-' + match.toLowerCase()
  )
  return (str[0] === str[0].toUpperCase())
    ? result.substring(1)
    : result
}

console.log(kebabCase('TestMe'))
console.log(kebabCase('test-me'))
console.log(kebabCase('testMe'))

'test-me'
'test-me'
'test-me'

Tested at: https://playcode.io/

Just adding to this conversation:

function kebabCase (str) {
  const result = str.replace(
    /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,
    match => '-' + match.toLowerCase()
  )
  return (str[0] === str[0].toUpperCase())
    ? result.substring(1)
    : result
}

console.log(kebabCase('TestMe'))
console.log(kebabCase('test-me'))
console.log(kebabCase('testMe'))

'test-me'
'test-me'
'test-me'

Tested at: playcode.io

American Flag -> american -flag

For me the issue lies with toLowerCase, this should only happen IF string was replaced.

• chDe -> ch-de
• American Flag -> American Flag

Previously: Som3thing\3lse => som3-thing-3-lse
My version: Som3thing\3lse => som3thing-3lse

Sorry @tehpsalmist
kebabCase('ABC_123') -> 'ab-c-123'

const toKebabCase = str =>
    str &&
    str
      .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
      .map(x => x.toLowerCase())
      .join('-');

Sorry @Vadorequest
toKebabCase('FOO-BAR') -> ''f-o-o-bar''

str
  .replace(/([A-Z])([A-Z])/g, '$1-$2')
  .replace(/([a-z])([A-Z])/g, '$1-$2')
  .replace(/[\s_]+/g, '-')            
  .toLowerCase() 

Sorry @GerardRodes
'FOO-BAR' -> ''f-oo-b-ar''

@oravecz That's a shame! Do you think you have a fix handy?

https://lodash.com/docs/4.17.15#kebabCase I don't use any other nowadays

Install:
https://www.npmjs.com/package/lodash.kebabcase