Insert a Space before Capital Letters in a String in JavaScript

Posted on by Davis Cole
Insert a Space before Capital Letters in a String in JS

In this article, you’ll learn how to insert a space before capital letters in a string in JavaScript by using a combination of a Regular Expression and either the String class’ .match() function or .replace()/.replaceAll() function.

Inserting a Space before Capital Letters in a String

As a prerequisite, you need to understand how a regular expression (often shorthanded to “regex” or “RegExp”) works. A regex is a pattern used to identify and match character combinations in a string, a regex is usually made with two slashes and a pattern in between (/…/). Additionally, a Regular Expression is also a class – i.e., the RegExp class.

This article won’t go too deep into regular expressions as there’s too much ground to cover. As such we’ll only be covering the regex that’ll be used in this article:

/([A-Z])/g

  • "(...)": A group, anything in it is considered a single thing to detect
  • "[A-Z]": Detect capital letter. As a sidenote: If you replace it with [a-z], it will detect lower-case letter.
  • "g": “Global”, is used in some functions like .search() or .replace() to make sure every instance of the pattern is detected instead of just one.

For a more detailed description of a Regular Expression, go here.

Using the .match() function and a for...of loop

The idea of this method includes using a blank string variable (here we’ll call newStr) and iterating over the string. For each iteration there are 2 steps:

  1. Check if a the letter being iterated over is a capital letter with the String class’ .match() function, if yes add a space to newStr
  2. Add the current letter to newStr

Syntax: String.prototype.match(RegExp regexp)

The String class’ .match() function takes a single parameters being the regexp parameter, which is a regex that will be used to check for a match in the string.

By the end, you’ll get a final string but with spaces behind every capital letter. As such:

Code:

const str = "LearnShareIT";

function addBlankBehindCapital(str) { 
    let newStr = "";
    
    for (const letter of str) {
        // If the current letter is a capital letter, add a blank space
        if (letter.match(/([A-Z])/g)) newStr += " ";
        newStr += letter;
    }

    return newStr;
}

console.log(addBlankBehindCapital(str));

Output:

" Learn Share I T"

You can insert a space after all capital letters instead by simply switching steps 1 with 2 – or in this case, putting line 7 in front of line 8.

Code:

...
    {
        newStr += letter;
        if (letter.match(/([A-Z])/g)) newStr += " ";
    }
...

Output:

"Learn Share I T "

As a side note, you can iterate over the string by using the RegExp class’ .exec() function.

Syntax: RegExp.prototype.exec(String str)

The .exec() function executes a search in a string and returns either null or an array describing 4 things: The instance found, the index it was found, the original string it was captured from, and the named capture groups (or undefined if none are defined). The function will return the next instance found and will return null when nothing new is found. As such:

Code:

const str = "LearnShareIT";

function addBlankBehindCapital(str) { 
    const regex = RegExp(/[\w\W]/, 'g'); // Regex detecting every letter
    let array;
    let newStr = "";

    while ((array = regex.exec(str)) !== null) {
        // array[0] is the current letter
        // If the current letter is a capital letter, add a blank space
        if (array[0].match(/([A-Z])/)) newStr += " ";
        newStr += array[0];
    }

    return newStr;
}

console.log(addBlankBehindCapital(str));

Output:

" Learn Share I T"

Note the "[\w\W]", which can be described as “Every letter and every non-letter” i.e., detect everything. Additionally, you can get the same results with "[\d\D]" (“every digit and every non-digit”) or "[\s\S]" (“every whitespace and non-whitespace”).

Using the .replace() or .replaceAll() function

Syntax: String.prototype.replace(String/RegExp search, String replace)

Syntax: String.prototype.replaceAll(String/RegExp search, String replace)

The String class’ .repalce() function, as its name implies, takes a string and replaces the first instance of something with something else. If a regex is used to detect instead of a string, it will detect the first pattern instead.

The String class’ .replaceAll() function, similarly, replaces every instances in a string. However, note that if you’re using a regex and it contains the "g" modifier, the .replace() and .replaceAll() functions will work the same.

An additional thing is that if the search parameter is a regex, any instance of "$" and a number in the replace parameter represents the the letter getting replaced (i.e., "$1" is the 1st letter that was replaced, "$2" is the 2nd letter, etc.).

With all this, we have as such:

Code:

const str = "LearnShareIT";
console.log(str.replace(/([A-Z])/g, " $1"));

Output:

" Learn Share I T"

Summary

To insert a space before capital letters in a string in JavaScript, you can use a combination of a Regular Expression and either iterate over the string and check if a letter is in uppercase with the String class’ .match() function or use the String class’ .replace() or .replaceAll() function to replace every instance of an uppercase letter with a the same letter and a space behind it.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *