Common string manipulation tasks and how to solve them.

Uppercase the First Letter

Capitalize a string by uppercasing only the first character:

const name = 'flavio'
const nameCapitalized = name.charAt(0).toUpperCase() + name.slice(1)
//'Flavio'

As a reusable function with type checking:

const capitalize = (s) => {
  if (typeof s !== 'string') return ''
  return s.charAt(0).toUpperCase() + s.slice(1)
}

capitalize('flavio') //'Flavio'
capitalize('f')      //'F'
capitalize(0)        //''
capitalize({})       //''

For presentational purposes on web pages, CSS may be better:

p.capitalize {
  text-transform: capitalize;
}

Check if String Contains Substring

Use includes() for a boolean result:

'a nice string'.includes('nice') //true

Use indexOf() to get the position:

'a nice string'.indexOf('nice') //2
'a nice string'.indexOf('bad') //-1

Pre-ES6 pattern using indexOf():

'a nice string'.indexOf('nice') !== -1 //true

Find a Character in a String

Use includes() to check if a character exists:

'a nice string'.includes('a') //true
'a nice string'.includes('b') //false

Use indexOf() to find the exact position:

'a nice string'.indexOf('a') //0
'a nice string'.indexOf('c') //4

Replace Whitespace

Remove all whitespace using a regular expression:

const name = 'Hi my name is Flavio'
name.replace(/\s/g, '') //'HimynameisFlavio'

The \s matches any whitespace character (spaces, tabs, newlines). The g flag replaces all occurrences.

Slugify a String

Convert a string to a URL-friendly slug:

function slugify(str) {
  str = str.trim()
  str = str.toLowerCase()
  str = str.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
  str = str.replace(/[^a-z0-9 -]/g, '')
  str = str.replace(/\s+/g, '-')
  str = str.replace(/-+/g, '-')
  return str
}

slugify('Hello World!')     //'hello-world'
slugify('Café au lait')     //'cafe-au-lait'
slugify('  Multiple   Spaces  ') //'multiple-spaces'

Or use the slugify library:

import slugify from 'slugify'

slugify('Testing this') //'Testing-this'
slugify('Testing. this!', { remove: /[*+~.,()'"!:@]/g })

Validate an Email Address

Use a regular expression to validate email format:

const validate = (email) => {
  const expression = /\S+@\S+/
  return expression.test(String(email).toLowerCase())
}

validate('test@example.com') //true
validate('invalid-email') //false

For a more thorough validation:

const validate = (email) => {
  const expression = /(?!.*\.{2})^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i
  return expression.test(String(email).toLowerCase())
}

Remember: the ultimate test for email validity is sending a confirmation email. Consider also using the HTML5 email input type for client-side validation:

<input type="email" name="email" placeholder="Your email" />

Get String Until a Character

Extract everything before a specific character:

const str = 'test-hey-ho'
str.split('-')[0] //'test'

Remove the First Character

Use slice() starting at index 1:

const text = 'abcdef'
const result = text.slice(1) //'bcdef'

Note: slice() returns a new string and doesn’t modify the original.

Remove the Last Character

Use slice() with a negative end index:

const text = 'abcdef'
const result = text.slice(0, -1) //'abcde'

The -1 tells slice() to stop one character before the end.

Create a Multiline String

Use template literals:

const multilineString = `A string
on multiple lines`

const anotherMultilineString = `Hey
this is cool
a multiline
string!`

Lessons in this unit:

0:	Introduction
1:	String Basics
2:	Accessing Characters
3:	Searching Strings
4:	Extracting Substrings
5:	Transforming Strings
6:	Modifying Strings
7:	Trimming and Padding
8:	▶︎ String Recipes
9:	Unicode and UTF-8
10:	Printable ASCII characters list
11:	Non-printable ASCII characters list