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

// Define the 'toKebabCase' function.
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('-');

// Test the 'toKebabCase' function with sample inputs.
console.log(toKebabCase('camelCase')); // Output: camel-case
console.log(toKebabCase('some text')); // Output: some-text
console.log(toKebabCase('some-mixed_string With spaces_underscores-and-hyphens')); // Output: some-mixed-string-with-spaces-underscores-and-hyphens
console.log(toKebabCase('AllThe-small Things')); // Output: all-the-small-things
console.log(toKebabCase('IAmListeningToFMWhileLoadingDifferentURLOnMyBrowserAndAlsoEditingSomeXMLAndHTML')); // Output: i-am-listening-to-fm-while-loading-different-url-on-my-browser-and-also-editing-some-xml-and-html

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

Visual 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.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://www.w3resource.com/javascript-exercises/fundamental/javascript-fundamental-exercise-123.php