JavaScript: Trimming Leading-Trailing White Spaces

Before we start, there's a post about replacing more than one white spaces to only one horizontal space on this page.

---

Modern Browser

To trim leading/trailing white spaces, on modern browser, we can use trim() method:

the_string.trim()

Example

var the_string = " this has many random "; the_string = the_string.trim(); // Now the_string variable consists of "this has many random"

---

(JavaScript) Regular Expression Equivalency

/^\s+|\s+$/g

Details:

• The ^ is to match the starting string.
• The $ is to match the back of the string.
• The \s is to match all white space criteria (horizontal space, tab, carriage, and so on).
• The + is to match one or more repetition.
• The | is the OR operator.
• The g is to match globally (the entire string).

So this regular expression pattern /^\s+|\s+$/g can be translated to words as:

Find all (1 or more repetition of) white space which is located in front OR at the back of the entire string.

To be more complete:

/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g

Details:

• The [..] brackets are to group characters. Find all the character combinations inside the brackets.
• The \uFEFF is a boundary character: "zero width no-break space" or "byte order mark".
• The \xA0 is a &nbsp character: "no-break space".

---

Replacing Found Pattern

We can use the RegExp finder above in replace() method:

SYNTAX

the_string.replace(/regexp pattern finder/, "the substitute")

USAGE

var the_string = " this has many random "; the_string = the_string.replace(/^\s+|\s+$/g, ""); // Now the_string variable consists of "this has many random"

Or, like so:

var the_string = " this has many random "; the_string = the_string.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ""); // Now the_string variable consists of "this has many random"

Combining it with the more-than-1-white-space trimmer:

The "more-than-1-white-space" finder pattern can be /\s+/g or to be precise, /\s{2,}/g.

The second one will look for 2 or more repetitions of white spaces (any white spaces) globally.

The first one will look for 1 or more repetitions of white spaces, also globally.

The advantage of the first one is that we can strip new line/tab/other than horizontal space, and then replace it with just one horizontal space. But of course, it depends on the system you're building. It can be a disadvantage.

Let's use the first one as an example, the /\s+/g finder pattern:

var the_string = " this has many random "; the_string = the_string.replace(/^\s+|\s+$/g, "").replace(/\s+/g, " "); // the_string output: "this has many random"

Or:

var the_string = " this has many random "; the_string = the_string.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, "").replace(/\s+/g, " "); // the_string output: "this has many random"

As you can see, the replace() can be conveniently chained.

the_string
    .replace(/regexp1/flag, "substitute1")
    .replace(/regexp2/flag, "substitute2")
    .replace(/regexp3/flag, "substitute3")
    ...

replace() method can also have a callback method to further manipulate the string.

the_string.replace(/r/f, function (v) {
    //do something and return it
})

Right, let's continue...

Or, using trim():

var the_string = " this has many random "; the_string = the_string.trim().replace(/\s+/g, " "); // the_string output: "this has many random"

---

Let's Make A Function

As such:

function trimAll(s) { if (!String.trim) { s = s.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ""); } else { s = s.trim(); } return s.replace(/\s+/g, " "); // this to replace white space(s) with only 1 horizontal space }

Using the function trimAll:

var the_string = " this has many random "; the_string = trimAll(the_string); // the_string output: "this has many random"

The function trimAll only accepts String type of argument (the input). Other than that, you'll see error on your browser console.
You can add if-else to filter the input and/or add other arguments (such as flag) if then the manipulator function needs to be more sophisticated.

---

Links

• trim() method at MDN
• Special characters at MSDN
• replace() method on MDN
• replace() method on MSDN