Skip to main content

How to Add Spaces Between Characters in a String in JavaScript

A common text formatting task is to insert spaces between every character of a string, effectively "spacing out" the letters. For example, you might want to transform the word "HELLO" into "H E L L O" for a stylistic effect.

This guide will teach you the modern and most concise method for achieving this using a combination of String.prototype.split() and Array.prototype.join(). You will also learn how to handle strings that already contain spaces and how to use a more traditional for...of loop as an alternative.

The most elegant and idiomatic way to add a space between each character is to chain two built-in methods together.

The logic:

  1. split(''): First, split the string into an array of its individual characters.
  2. join(' '): Then, join the elements of that new array back into a string, but use a space as the separator.

The syntax:

const spacedOutString = myString.split('').join(' ');

Basic Example: Spacing Out a Simple Word​

This script defines a function that takes a string and returns a new string with spaces between the characters.

function addSpaces(str) {
  return str.split('').join(' ');
}

const result1 = addSpaces('HELLO');
console.log(result1); // Output: H E L L O

const result2 = addSpaces('JavaScript');
console.log(result2); // Output: J a v a S c r i p t

Output:

H E L L O
J a v a S c r i p t

How the split() and join() Method Works​

Let's break down the process for the string "HELLO":

  1. 'HELLO'.split(''): The split() method is called with an empty string ('') as the separator. This special instruction tells it to split the string between every single character. The result is an array: ['H', 'E', 'L', 'L', 'O'].
  2. ['H', 'E', 'L', 'L', 'O'].join(' '): The join() method is then called on this new array. It concatenates all the elements into a single string, placing the separator string (' ') between each element. The final result is "H E L L O".

Handling Strings That Already Contain Spaces​

A simple split('').join(' ') will also add spaces around any existing spaces, which might be undesirable.

The problem:

const str = 'Hello  World';
const result = str.split('').join(' ');

// The original double space becomes a quadruple space
console.log(result); // Output: H e l l o     W o r l d

Output:

H e l l o     W o r l d

Solution: Remove Spaces First​

If your goal is to space out only the non-space characters, you must first remove all existing spaces from the string before splitting and joining.

function addSpacesToLetters(str) {
  // First, remove all spaces from the string
  const noSpaces = str.replace(/\s+/g, '');
  
  // Then, perform the split and join
  return noSpaces.split('').join(' ');
}

const result = addSpacesToLetters('Hello  World');
console.log(result); // Output: H e l l o W o r l d

Output:

H e l l o W o r l d
note

/\s+/g: This is a regular expression. \s+ matches one or more whitespace characters, and the g flag ensures it replaces all occurrences globally.

An Alternative Method: Using a for...of Loop​

You can also achieve this with a more traditional for...of loop. This method is more verbose but can offer more control if you need to add complex logic for each character.

The Solution:

function addSpacesWithLoop(str) {
  let result = '';

  for (const char of str) {
    // Append the character followed by a space
    result += char + ' ';
  }

  // Remove the trailing space at the very end
  return result.trimEnd();
}

const result = addSpacesWithLoop('HELLO');
console.log(result); // Output: H E L L O

Output:

H E L L O
note

This method is less concise and requires a final trimEnd() to clean up the extra space added after the last character.

Conclusion​

Adding spaces between the characters of a string is a simple formatting task with a very elegant solution in modern JavaScript.

  • The split('').join(' ') method is the recommended best practice. It is concise, highly readable, and makes excellent use of built-in string and array methods.
  • If your source string may contain spaces, decide if you want to preserve them or remove them first with str.replace(/\s+/g, '') before applying the spacing.
  • A for...of loop is a valid but more verbose alternative.

For most use cases, the split-join chain is the superior and more idiomatic choice.

Table of Contents