Sunday, January 3, 2016

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:

Example


(JavaScript) Regular Expression Equivalency

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:

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
USAGE

Or, like so:

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:

Or:

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():


Let's Make A Function

As such:

Using the function trimAll:

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

No comments:

Post a Comment

Tell me what you think...