| Context: In programming, trim (or strip) is a common string manipulation function which removes leading and trailing whitespace from a string. Precisely what constituteswhitespace varies between programming languages and implementations, but it normally includes space, tab, line feed, and carriage return characters.The JavaScript language does not currently have a trim function for strings — although it has a simple string data type (differentiated from other data types simply by the literal it contains) and a built-in String object. Many different approaches exist to accomplish this common task in JavaScript. This tip will walk you through some common approaches on an evolutionary path and help you in choosing the best depending on your specific context. Let’s get started! |
|
1. Using Loops: – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – A straightforward (and perhaps novice) approach would be to use some sort of a pure looping construct like the following: Code: |
function trim(str) {
while (str.substring(0, 1) == ' ') {
str = str.substring(1, str.length);
}
while (str.substring(str.length - 1, str.length) == ' ') {
str = str.substring(0, str.length - 1);
}
return str;
}
Usage:
var str = ' abc ';
var trimmedStr = trim(str);
[-] Novice. Less efficient. Not object oriented.
2. Using Regular Expressions – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
The use of regular expressions to implement a JavaScript trim function is much more efficient than its loop variant.
Code:
function trim(str) { return str.replace(/^\s+|\s+$/g,”);
}
Usage:
var str = ‘ abc ‘;
var trimmedStr = trim(str);
[+] Concise. More efficient (Fastest while working with smaller strings). Most frequently used.
[-] Not object oriented.
3. Using an Object Oriented Approach
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
One of JavaScript’s best features is the ability to augment the built-in types by assigning a function to the type’s prototype. JavaScript trim can be implemented by extending the String prototype as follows:
Code:
String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ”);
}
Usage:
var str = ‘ abc ‘; // OR var str = new String(‘ abc ‘);
var trimmedStr = str.trim();
[+] Object oriented. Method offered by the object itself.
[+] Now all strings have a trim method, even strings that were constructed before the augmentation.
4. Using a JavaScript Library – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
There are some mature, light-weight, cross-browser, widely-tested, efficient JavaScript libraries available — e.g. Prototype JavaScript Framework(http://www.prototypejs.org/) — that offer this feature (and a whole lot more) off the shelf. Prototype enhances the String object with many useful methods (ranging from the trivial to the complex) for String.prototype. Its strip()method is just what we need here:
Script:
Usage:
var str = ‘ abc ‘;
var trimmedStr = str.strip();
[+] No re-inventing the wheel; helps you focus on more important things. Cross-browser. Efficient. [+] Bonus: Library has much more to offer.
[-] Learning time. However, this might be less of a worry compared to the significant gains.
Notes:
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
- Trim (programming) (http://en.wikipedia.org/wiki/Trim_(programming)) summarizes how to trim a string across different languages.
- If you are a JavaScript beginner, you might benefit more from going over its basics before beginning to use a framework.
- Faster JavaScript Trim (http://blog.stevenlevithan.com/archives/faster-trim-javascript) compares various JavaScript trim approaches for efficiency. Most of these differ in their exact use of regular expressions and the resulting gains in speed due to internal optimizations in how regular expressions are handled by JavaScript.
- Regular expressions can be used with browsers that support JavaScript version 1.2: Microsoft Internet Explorer 4 and above, Netscape 4 and above, all versions of Firefox, and most other modern web browsers.