What is /^\s+|\s+$/gm in JavaScript? Explaining the Whitespace Trimming Regex

Table of Contents#

1. What is a Regular Expression?
2. Breaking Down /^\s+|\s+$/gm
   • The Pattern: ^\s+|\s+$
   • The Flags: g and m
3. What Does This Regex Do?
4. How It Works: Step-by-Step
5. Examples in Action
6. Comparing with String.prototype.trim()
7. When to Use This Regex
8. Common Pitfalls & Mistakes
9. Modifying the Regex for Specific Needs
10. Conclusion
11. References

What is a Regular Expression?#

A regular expression (regex) is a sequence of characters that defines a search pattern. In JavaScript, regex is used for matching, replacing, or extracting substrings from text. They’re especially useful for handling structured or unstructured text with consistent patterns—like whitespace, emails, or phone numbers.

For example, the regex /a/ matches the letter "a" in a string, and str.replace(/a/, 'b') replaces the first "a" with "b". But regex can get far more complex, as we’ll see with /^\s+|\s+$/gm.

Breaking Down /^\s+|\s+$/gm#

Let’s dissect this regex into two parts: the pattern (^\s+|\s+$) and the flags (gm).

The Pattern: ^\s+|\s+$#

The pattern is split by |, which acts as an "OR" operator in regex. This means the regex will match either the left side (^\s+) or the right side (\s+$). Let’s break down each part:

Part 1: ^\s+#

• ^: Asserts the position at the start of a line (more on this later, thanks to the m flag).
• \s: Matches any whitespace character. This includes:
  • Space ( )
  • Tab (\t)
  • Newline (\n)
  • Carriage return (\r)
  • Vertical tab (\v)
  • Form feed (\f).
• +: Quantifier that matches one or more of the preceding element (in this case, \s).

So, ^\s+ matches one or more whitespace characters at the start of a line.

Part 2: \s+$#

• \s+: Again, matches one or more whitespace characters (same as above).
• $: Asserts the position at the end of a line (again, thanks to the m flag).

So, \s+$ matches one or more whitespace characters at the end of a line.

Combining Both Parts#

With |, the full pattern ^\s+|\s+$ matches either leading whitespace (start of line) or trailing whitespace (end of line) in a string.

The Flags: g and m#

Flags modify how the regex behaves. Here, we have two flags: g (global) and m (multi-line).

g (Global Flag)#

By default, regex stops after the first match. The g flag tells JavaScript to find all matches in the string, not just the first. Without g, only the first instance of leading or trailing whitespace would be removed—not all.

m (Multi-Line Flag)#

The m flag changes the behavior of ^ and $:

• Normally, ^ matches the start of the entire string, and $ matches the end of the entire string.
• With m, ^ matches the start of each line (after a newline \n), and $ matches the end of each line (before a newline \n).

This is critical! The m flag is why this regex works on multi-line strings, trimming whitespace line by line.

What Does This Regex Do?#

Putting it all together: /^\s+|\s+$/gm is a regex that removes leading and trailing whitespace from every line of a multi-line string.

• Leading whitespace: Spaces, tabs, etc., at the start of a line.
• Trailing whitespace: Spaces, tabs, etc., at the end of a line.
• Multi-line strings: Strings with newline characters (\n), like text from a textarea, CSV files, or code snippets.

How It Works: Step-by-Step#

Let’s walk through how this regex operates on a sample multi-line string:

Sample Input String:

  Hello, World!    
  This is a multi-line string.  
    With extra tabs and spaces.  

(Note: Each line has leading/trailing whitespace: 2 spaces before "Hello", 4 spaces after "World!", a tab before "With", etc.)

Step 1: The regex scans the string line by line (thanks to m).#

The m flag treats each line (separated by \n) as a separate "mini-string."

Step 2: For each line, it looks for ^\s+ (leading whitespace).#

In the first line ( Hello, World! ), ^ matches the start of the line, and \s+ matches the two leading spaces.

Step 3: Then, it looks for \s+$ (trailing whitespace).#

In the first line, \s+$ matches the four trailing spaces after "World!".

Step 4: The g flag ensures all matches are replaced.#

Using String.replace(), we replace all matched whitespace with an empty string ('').

Result After Replacement:#

Hello, World!
This is a multi-line string.
With extra tabs and spaces.

Each line now has no leading or trailing whitespace!

Examples in Action#

Let’s solidify this with code examples. To use the regex, we pair it with String.replace(), replacing matches with '' (empty string).

Example 1: Basic Multi-Line Trimming#

const messyText = `  Line 1 has leading spaces.    
\tLine 2 starts with a tab.  
Line 3 has trailing spaces   \nLine 4 is empty.  
`;  
 
const cleanText = messyText.replace(/^\s+|\s+$/gm, '');  
 
console.log(cleanText);  

Output:

Line 1 has leading spaces.
Line 2 starts with a tab.
Line 3 has trailing spaces
Line 4 is empty.

Example 2: Trimming Tabs and Newlines#

Whitespace includes tabs (\t), newlines (\n), and carriage returns (\r). Let’s test with mixed whitespace:

const messyInput = `\t  \tLeading tabs and spaces.  
Trailing tabs and newlines\t  \n  
`;  
 
const cleanInput = messyInput.replace(/^\s+|\s+$/gm, '');  
 
console.log(cleanInput);  

Output:

Leading tabs and spaces.
Trailing tabs and newlines

Comparing with String.prototype.trim()#

You might be thinking: "Why not just use trim()?" Good question! String.prototype.trim() is a built-in method that removes leading/trailing whitespace from the entire string—but it doesn’t work line by line.

Example: trim() vs. /^\s+|\s+$/gm#

Input String:

  Line 1  
Line 2 with trailing spaces   
  Line 3  

Using trim():#

const str = `  Line 1  
Line 2 with trailing spaces   
  Line 3  `;  
 
console.log(str.trim());  

Output:

Line 1  
Line 2 with trailing spaces   
  Line 3  

(trim() removes leading spaces from the first line and trailing spaces from the last line, but leaves line 2’s trailing spaces and line 3’s leading spaces untouched.)

Using /^\s+|\s+$/gm:#

console.log(str.replace(/^\s+|\s+$/gm, ''));  

Output:

Line 1  
Line 2 with trailing spaces  
Line 3  

(All lines are trimmed individually!)

Key Takeaway: Use trim() for single-line strings or to trim the entire string. Use /^\s+|\s+$/gm for multi-line strings where each line needs trimming.

When to Use This Regex#

This regex shines in scenarios involving multi-line text:

• User input: Text from a <textarea> where users may add extra spaces/tabs per line.
• Data cleaning: Parsing CSV files, log files, or code snippets with inconsistent line whitespace.
• Formatting: Preparing text for display (e.g., code blocks, emails) where clean lines matter.

Common Pitfalls & Mistakes#

1. Forgetting the m Flag#

Without m, ^ and $ match the start/end of the entire string, not individual lines.

Example (missing m):

const str = `  Line 1  
  Line 2  `;  
 
// ❌ No m flag: only trims start of entire string and end of entire string  
str.replace(/^\s+|\s+$/g, '');  
// Output: "Line 1  
//   Line 2" (Line 2 still has leading spaces!)  

2. Not Using g Flag#

Without g, only the first match is replaced.

Example (missing g):

const str = `  Line 1  \n  Line 2  `;  
 
// ❌ No g flag: only first leading/trailing whitespace is removed  
str.replace(/^\s+|\s+$/m, '');  
// Output: "Line 1  \n  Line 2" (trailing space in Line 1 and leading in Line 2 remain!)  

3. Assuming \s Only Matches Spaces#

\s includes tabs (\t), newlines (\n), carriage returns (\r), etc. If you only want to trim spaces (not tabs), use instead of \s:

// Trim only spaces (not tabs)  
str.replace(/^ +| +$/gm, '');  

Modifying the Regex for Specific Needs#

You can tweak this regex to target specific use cases:

Trim Only Leading Whitespace#

Remove the trailing part (\s+$):

// Trim leading whitespace from each line  
str.replace(/^\s+/gm, '');  

Trim Only Trailing Whitespace#

Remove the leading part (^\s+):

// Trim trailing whitespace from each line  
str.replace(/\s+$/gm, '');  

Trim Only Spaces (Not Tabs/Newlines)#

Replace \s with (a literal space):

// Trim only spaces (ignore tabs/newlines)  
str.replace(/^ +| +$/gm, '');  

Conclusion#

The regex /^\s+|\s+$/gm is a powerful tool for trimming leading and trailing whitespace from every line of a multi-line string. By combining ^/$ (with m for multi-line) and \s+ (whitespace), it targets line-specific whitespace, making it ideal for cleaning up multi-line text.

Key takeaways:

• Use /^\s+|\s+$/gm to trim each line of a multi-line string.
• g ensures all matches are replaced; m enables line-by-line matching.
• Compare with trim() (trims entire string) vs. this regex (trims per line).

Next time you’re dealing with messy multi-line text, this regex will be your go-to for clean, consistent lines!

References#

• MDN: Regular Expressions
• MDN: String.prototype.replace()
• MDN: \s (Whitespace Character)
• MDN: Regex Flags
• MDN: String.prototype.trim()