JavaScript String Cleaning
JavaScript has several built-in methods for “cleaning” strings that can be very useful for your frontend application. Since these methods are built in, they are accessible on any string as they live on the primitive String datatype (String.prototype). These methods are not unknown, but perhaps not often utilized. Let’s dive in.
padStart(targetLength, padString)
padEnd(targetLength, padString)
These methods “pad” the beginning or end of a string with a string of your choosing.
Each method takes in two arguments:
1) targetLength: The total length of the resulting string
2) padString (optional): The string to pad the remaining spaces
A good example of implementing padStart is the following:
Build a function that makes a staircase of size n = 4. The result should output a staircase of hashes:
We want to iterate n number of times and dynamically console log hashes. So we can set a variable, line to an empty string, iterate with a for loop and add a single hash to the line variable. Because each line is a string of n characters, we want to add spaces up to n where there isn’t a hash.When we console.log the result, we call padStart on line and pass in n as the first argument and an empty space as the second argument. This gives us the desired result of “padding” the beginning of each line with spaces.
padEnd does the same thing except it adds padding to the end of the string it’s called on.
trim()
trimStart()
trimEnd()
The trim method removes any type of whitespace from both the beginning and end of the string. This can be useful when a user is filling out a form and mistakenly adds a space at the beginning or end of an input field.
Whereas the trimStart method removes whitespace from only the beginning and trimEnd removes whitespace from only the end of the string:
replace(pattern, replacement)
This one is more frequently used than the other methods as it has a lot of capabilities all within a single method.
This method takes in two arguments:
1) pattern: The regular expression or string that you want to match
2) replacement: The value you want to replace the pattern with
A good example of implementing replace is validating a palindrome. A palindrome is an input that is the same forwards as it is backwards. If you wanted to validate a palindrome by alphanumeric characters only (letters and numbers), you would need a way to remove any characters that aren’t alphanumeric.
Input: “A man, a plan, a canal: Panama”
Output: true
This is where replace comes in handy. We can utilize Regex as the pattern. We want to match any non-alphanumeric character. Regex has a built-in token, \W, which matches any non-word character which is exactly what we want as our first argument to replace. The second argument is what we want to replace the non-alphanumeric characters with. In this case we just want to remove those characters so our second argument will simply be an empty string.
substring(indexStart, indexEnd)
This method takes in two arguments:
1) indexStart: The index of the first character you want to include
2) indexEnd: The index after the last character you want to include
This method returns the portion of the string contained within the indexes provided. This can be useful for segmenting user input when you can predict something the user will enter, or when you are parsing HTML and want to remove element tags.
Here we see there are line break tags at the beginning and end of the string we want to parse. This method is somewhat limiting in that you need to know what your input looks like in order to reliably parse the correct information since it relies on indices, not characters. But we can call substring with the 4th index and 20th index as arguments in order to return the sub string that we want.
There are of course other useful built-in string methods but the methods above are underutilized but perfect for cleaning user inputs.
That’s it!