How to trim characters from a string in JavaScript

Oct 03, 2023#javascript

In JavaScript, strings are sequences of characters enclosed by quotation marks. Sometimes, we may want to remove some characters from the beginning or end of a string, such as whitespaces, punctuation marks, digits, etc. This process is called trimming.

Whitespace characters, matched by the \s metacharacter in regular expressions, are any string of text composed only of spaces, tabs or line breaks. To be precise, they are CRLF sequences, carriage returns or line feeds. Some examples of whitespace characters are:

A space character: " "
A tab character: "\t"
A carriage return character: "\r"
A new line character: "\n"
A vertical tab character: "\v"
A form feed character: "\f"

There are different ways to trim a string in JavaScript, depending on what kind of characters we want to remove and how much control we want to have over the trimming process. Some of the common methods are:

Using trim(), trimStart() and trimEnd() methods of the String object. These methods remove whitespace characters from both ends, the beginning or the end of a string, respectively. They do not modify the original string, but return a new trimmed string.

// Using trim() to remove whitespace from both ends of a string
let greeting = "  Hello, world!  ";
console.log(greeting); // "  Hello, world!  "
console.log(greeting.trim()); // "Hello, world!"

// Using trimStart() to remove whitespace from the beginning of a string
let name = "   John Doe   ";
console.log(name); // "   John Doe   "
console.log(name.trimStart()); // "John Doe   "

// Using trimEnd() to remove whitespace from the end of a string
let message = "   Thank you for your help!   ";
console.log(message); // "   Thank you for your help!   "
console.log(message.trimEnd()); // "   Thank you for your help!"

Using replace() method of the String object. This method replaces a substring or a pattern in a string with a new substring or a function result. We can use regular expressions to specify the pattern and the flags to modify the search behavior.

// Trim whitespace from both ends of a string
let greeting = "  Hello, world!  ";
console.log(greeting); // "  Hello, world!  "
console.log(greeting.replace(/^\s+|\s+$/g, "")); // "Hello, world!"

// Remove all digits from a string
let password = "p4ssw0rd123";
console.log(password); // "p4ssw0rd123"
console.log(password.replace(/\d/g, "")); // "psswrd"

// Remove all punctuation marks from a string
let sentence = "Hello, world! How are you today?";
console.log(sentence); // "Hello, world! How are you today?"
console.log(sentence.replace(/[.,!?]/g, "")); // "Hello world How are you today"

// Remove all vowels from a string
let word = "beautiful";
console.log(word); // "beautiful"
console.log(word.replace(/[aeiou]/gi, "")); // "btfl"

Using utility libraries like Lodash or Voca. These are external libraries that provide many useful functions for manipulating strings in JavaScript. They have their own methods for trimming strings. These methods work similarly to the native String methods, but they also accept an optional parameter to specify the characters to trim, while the String methods only trim whitespace characters by default.

import _ from "lodash";

console.log(_.trim("  abc  ")); // "abc"
console.log(_.trim("-_-abc-_-", "_-")); // "abc"

console.log(_.trimEnd("  abc  ")); // "  abc"
console.log(_.trimEnd("-_-abc-_-", "_-")); // "-_-abc"

console.log(_.trimStart("  abc  ")); // "abc  "
console.log(_.trimStart("-_-abc-_-", "_-")); // "abc-_-"

import v from "voca";

console.log(v.trim(" Mother nature ")); // "Mother nature"
console.log(v.trim("--Earth--", "-")); // "Earth"

console.log(v.trimLeft("  Starship Troopers")); // "Starship Troopers"
console.log(v.trimLeft("***Mobile Infantry", "*")); // "Mobile Infantry"

console.log(v.trimRight('the fire rises   ')); // "the fire rises"
console.log(v.trimRight('do you feel in charge?!!!', '!')); // "do you feel in charge?"

share twitter send feedback