How to Split a String Every N Characters in JavaScript

A common string manipulation task is to "chunk" a string, or split it into an array of smaller, equal-length substrings. This is useful for formatting long codes (like serial numbers or API keys), processing data streams in fixed-size blocks, or displaying text in a specific layout.

This guide will demonstrate the most concise and powerful method for this task using String.prototype.match() with a regular expression. We will also cover a more traditional approach using a for loop for comparison.

The Core Method (Recommended): match() with a Regular Expression

The most elegant and idiomatic way to split a string into chunks of a specific length is to use String.prototype.match() with a simple regular expression.

Problem: you have a long string and you need to split it into an array of 4-character substrings.

// Problem: Split this string into ['tuto', 'rial', 'refe', 'renc', 'ecom']
let myString = 'tutorialreferencecom';

Solution:

function chunkString(str, length) {
  // The regex matches any character (`.`) up to `length` times.
  // The 'g' flag is crucial for finding all matches.
  let regex = new RegExp(`.{1,${length}}`, 'g');
  
  // The `|| []` is a fallback for an empty string to ensure it always returns an array.
  return str.match(regex) || [];
}

// Example Usage:
let str = 'tutorialreferencecom';
let chunks = chunkString(str, 4);

console.log(chunks);

Output:

['tuto', 'rial', 'refe', 'renc', 'ecom']

An Alternative Method: A for Loop with slice()

For those who prefer a more imperative approach or want to avoid regular expressions, a for loop that iterates through the string and "slices" it into chunks is a perfectly valid alternative.

function chunkString(str, length) {
  let result = [];
  
  for (let i = 0; i < str.length; i += length) {
    // Slice the string from the current index up to the length of the chunk.
    result.push(str.slice(i, i + length));
  }
  
  return result;
}

// Example Usage:
let str = 'tutorialreferencecom';
let chunks = chunkString(str, 4);

console.log(chunks);

Output:

['tuto', 'rial', 'refe', 'renc', 'ecom']

How the Regular Expression Works

The regular expression /.{1,N}/g (where N is the chunk size) is the key to the recommended method. Let's break it down:

• / ... /g: The / characters are the delimiters for the regex, and g is the global flag. This is essential, as it tells match() to find all matches in the string, not just the first one.
• .: A "metacharacter" that matches any single character (except for line terminators).
• {1,N}: This is a quantifier. It matches the preceding token (.) between a minimum of 1 and a maximum of N times.

So, /.{1,4}/g translates to: "Find every sequence of 1 to 4 characters, and do this globally for the whole string."

Why 1 to N? Using a range like {1,4} instead of a fixed size like {4} gracefully handles the end of the string. If the string's length is not a perfect multiple of the chunk size, the last match will simply be shorter.

'tutorialreference'.match(/.{1,4}/g); // Output: ['tuto', 'rial', 'refe', 'renc', 'e']

Practical Example: A Reusable chunkString Function

This example creates a robust, reusable function that demonstrates the recommended match() method.

/**
 * Splits a string into an array of chunks of a specified length.
 * @param {string} str The input string.
 * @param {number} length The desired length of each chunk.
 * @returns {Array<string>} An array of the string chunks.
 */
function chunkString(str, length) {
  if (!str || length < 1) {
    return [];
  }
  
  let regex = new RegExp(`.{1,${length}}`, 'g');
  return str.match(regex);
}

// Example Usage:
let serialNumber = 'ABC123DEF456GHI';

// Split into 3-character groups
let groups = chunkString(serialNumber, 3);
console.log(groups);            // Output: ['ABC', '123', 'DEF', '456', 'GHI']

// Format the serial number for display
console.log(groups.join('-'));  // Output: ABC-123-DEF-456-GHI

Output:

['ABC', '123', 'DEF', '456', 'GHI']
ABC-123-DEF-456-GHI

Conclusion

Splitting a string into fixed-size chunks is a simple task with a couple of clear solutions in JavaScript.

• The string.match() method with a regular expression (e.g., /.{1,N}/g) is the recommended best practice. It is concise, powerful, and idiomatically suited for this kind of pattern-based extraction.
• A for loop with slice() is a perfectly valid and readable imperative alternative, especially if you need to perform additional complex logic within the loop.