Spinal Tap Case - JavaScript Solution & Walkthrough

05/21 Spinal Tap Case

Convert a string to spinal case. Spinal case is all-lowercase-words-joined-by-dashes.

function spinalCase(str) {

  return str;
}

spinalCase('This Is Spinal Tap');

Credit: FreeCodeCamp.org

Understanding the Challenge

In this challenge, the function will be passed a string as an argument.

Our task is to complete the function such that it returns the string with the words separated by dash("-").

Also, the final string to be returned should be lower case. For example, given the string This Is Spinal Tap, the function should return this-is-spinal-tap

Note the given string can be given without any space like "thisIsSpinalTap" or with underscores as separator like "The_Andy_Griffith_Show" We need to ensure that our function deals with such cases so that end up as string separated by the dash sign("-").

Okay, Let's write some pseudocode before we move on.

Pseudocode

Given a string
  Make sure there's something separating the words that forms the string
  (example, spaces or underscores)
  Replace the separators with dash("-")
  convert the result to lower case.
Return the result.

Solving the Challenge

In this challenge, the function will be passed a string as an argument. From the test cases, we can see that for some, the words that forms the strings are separated by either spaces or underscores like these two examples spinalCase("This is a Spinal Tap")

Example
spinalCase("The_Andy_Griffith_Show")

There are also those who do not have any separator for the words that forms the strings.

Example 
spinalCase("thisIsSpinalTap")

For these ones, we need to find a way to separate them. To acheive that, we can use the .replace() method and a regular expression.

const spacedString = str.replace(/([a-z]) (A-Z)/g, "$1 $2")

let's break it down.

The first argument is /([a-z]) ([A-Z])/g This expression will help us identify those cases where a capital letter ([a-z]) precede a capital letter ([a-z]).

The g is refer to as a global modifier. This is what helps us get all cases where a upper case comes right after a lower case. Without this g, we will get only the first case that fulfills the regular expression.

The second argument is "$1 $2". Note the space between. This allows to insert a space between a lower case and an upper case. Whatever we put between $1 and $2 is what will end up being our separator. If we use "$1+$2", Our separator will no longer be space but a plus("+"). So our string will end up like this this+Is+Spinal+Tap

The next thing is to replace all spaces and underscores with a dash. Again, we'll need the .replace() method and a regular expression.

const dashedString = spacedString.replace(/\s|_/g, "-")

The first argument /\s|_/g helps us to get all spaces and underscores in the given string. \s and |_ gets the spaces and underscores respectively.

With the second argument "-", we're replacing every space or underscore with the dash("-") sign.

Now all that is left to be done is to convert the string to a lower case

const finalString = dashedString.toLowerCase();

Finally, we return finalString

return finalString

Our spinalCase function is now complete!

Final Solution

function spinalCase(str) {
  const spacedString = str.replace(/([a-z])([A-Z])/g, "$1 $2")
  const dashedString = spacedString.replace(/\s|_/g, "-")
  const finalString = dashedString.toLowerCase()
  return finalString;
}

spinalCase('This Is Spinal Tap'); // this-is-spinal-tap

Congratulations! You just cracked the "Spinal Tap Case" challenge. Cheers and happy coding!

Let's connect on Twitter

---

Useful Links

• Eloquent JavaScript Chapter 9 - Regular Expression
• W3Schools Lesson on the .replace() Method