w3resource

JavaScript: Convert a string to kebab case

JavaScript fundamental (ES6 Syntax): Exercise-123 with Solution

Write a JavaScript program to convert a string to kebab case.

Note: Break the string into words and combine them adding - as a separator, using a regexp.

  • Use String.prototype.match() to break the string into words using an appropriate regexp.
  • Use Array.prototype.map(), Array.prototype.join() and String.prototype.toLowerCase() to combine them, adding - as a separator.

Sample Solution:

JavaScript Code:

//#Source https://bit.ly/2neWfJ2 
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('-');

console.log(toKebabCase('camelCase'));
console.log(toKebabCase('some text'));
console.log(toKebabCase('some-mixed_string With spaces_underscores-and-hyphens'));
console.log(toKebabCase('AllThe-small Things'));
console.log(toKebabCase('IAmListeningToFMWhileLoadingDifferentURLOnMyBrowserAndAlsoEditingSomeXMLAndHTML'));

Sample Output:

camel-case
some-text
some-mixed-string-with-spaces-underscores-and-hyphens
all-the-small-things
i-am-listening-to-fm-while-loading-different-url-on-my-browser-and-also-editing-some-xml-and-html

Pictorial Presentation:

JavaScript Fundamental: Convert a string to kebab case.

Flowchart:

flowchart: Convert a string to kebab case

Live Demo:

See the Pen javascript-basic-exercise-123-1 by w3resource (@w3resource) on CodePen.


Improve this sample solution and post your code through Disqus

Previous: Write a JavaScript program to add an ordinal suffix to a number.
Next: Write a JavaScript program to reduce a given Array-like into a value hash (keyed data store).

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.