JavaScript Program to Remove All Whitespaces From a Text

What is a whitespace?

A Whitespace can be hard to define because it has many different meanings depending on where you look. For example: In typography, whitespace refers to the space between words on a page; in layout design, it's used to separate sections of content on a page; and in writing style guides, it refers to anything that isn't text (like spacing outside quotation marks).

Whitespaces are usually spaces, tabs, and newlines. They are used to separate words and lines in a text. Whitespaces help separate paragraphs of text, graphics, and other portions of a document, and helps a document look less crowded. Using white space effectively in a document keeps the reader reading the document, and helps the reader quickly find what they are interested in reading.

Common Use Cases

1. Remove all whitespaces (spaces, tabs, and newlines) from a text
2. Remove all whitespaces (tabs and newlines) from a text except spaces
3. Remove all whitespaces (spaces and newlines) from a text except tabs
4. Remove all whitespaces (spaces and tabs) from a text except newlines

In the following sections, we will learn to write a JavaScript program that will remove all whitespaces from a text.

Prerequisites

• Basic Understanding of JavaScript
• JavaScript's String.split() Method
• Javascript's Array.join() Method
• Regular Expressions in JavaScript

Contents

1. Removing Whitespaces Using String.split() and Array.join() Methods
2. Removing Whitespaces Using Regular Expressions

1. Removing Whitespaces Using String.split() and Array.join() Methods

In the following code, we will use the String.split() and Array.join() methods to remove all whitespaces from a text.

// function to remove whitespaces from a text
function removeWhitespaces(text) {
  // split the text into an array of words
  const words = text.split(' ');

  // print the array of words
  console.log(words); // [ 'Hello', 'World' ]

  return words.join('');
}

// call the function and stores the result
const result = removeWhitespaces('Hello World');

// prints the text without whitespaces
console.log(result); // 'HelloWorld'

2. Removing Whitespaces Using Regular Expressions

What are Regular Expressions?

Regular expressions are a way to write patterns of characters that we can search for in strings. Regular expressions are used to match patterns in text.

Common Use Cases of Regular Expressions

• Matching a pattern in a string
• Matching a pattern in a string and extracting the matched text
• Matching a pattern in a string and extracting the matched text and the position of the match

We will learn how to use regular expressions to remove whitespaces and newline characters from a text.

Program to remove whitespace characters from a text using a regular expression

function removeWhitespaces(text) {
  return text.replace(/\s/g, '');
}

const result = removeWhitespaces('Hello World');
console.log(result); // 'HelloWorld'

Program to remove newline characters from a text using regular expression

function removeWhitespaces(text) {
  return text.replace(/\n/g, '');
}

const result = removeWhitespaces('Hello World\n');
console.log(result); // 'HelloWorld'

In the above programs, a Regular Expression is used with the String.replace() method to remove all whitespaces from a text.

/\s/g checks for whitespace in the string globally whereas /\n/g checks for newline in the string globally.

Learn More on How to Match a Pattern in a String

Summary

In this tutorial, we have learnt how to use the String.replace() method to remove all whitespaces from a text. We have also learnt how to use regular expressions to remove spaces and newline characters from a text. We also looked into String.split() to split a text into an array of words and Array.join() to join an array of words into a text.

Please checkout our related content section below for more tutorials on similar topics.

We hope that you have learnt something from our tutorials. Please feel free to share this content with your friends.

If you have any questions or want some other content to be added to our website so that it can help you learn and grow further, please do not hesitate to contact us at info@createmysite.org. We would love to hear from you.

We are hiring!! If you are tech blogger who loves writing content on modern technologies, we would love to get in touch with you. Just drop us a mail at the email address mentioned above and we will reach out to you as soon as possible.

If you are interested in learning more about our website, please visit our about page.