What is the best way to trim() in javascript

Question

The question says it all; JS doesn\'t seem to have a native trim() method.

Answer 1

I made a trim-function speed in mind. This function beats in a clear difference all of 24 competitors (of which many use regular expressions) and also native string.trim() of Chrome and Chromium(!) and performs as speedy as Safari's trim(). Test results are here: http://jsperf.com/mega-trim-test/7

function trim27(str) {
  var c;
  for (var i = 0; i < str.length; i++) {
    c = str.charCodeAt(i);
    if (c == 32 || c == 10 || c == 13 || c == 9 || c == 12)
    continue; else break;
  }
  for (var j = str.length - 1; j >= i; j--) {
    c = str.charCodeAt(j);
    if (c == 32 || c == 10 || c == 13 || c == 9 || c == 12)
    continue; else break;
  }
  return str.substring(i, j + 1);
}

The function trims characters " \n\r\t\f", but it's easy to add more whitespace-characters, eg. those that regexp uses as whitespaces (\s) with only a minor performance lost ( please see http://jsperf.com/mega-trim-test/8 ).

Edit: The previous trim27() trims only the most common characters (" \n\r\t\f"), but to trim all possible whitespaces, I included below a new function mytrim():

if (!String.prototype.trim || "\x09\x0A\x0B\x0C\x0D\x20\xA0\u1680\u180E\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF".trim() || navigator.userAgent.toString().toLowerCase().indexOf("chrome") != -1)
    var mytrim = function(str) {
        var c;
        for (var i = 0; i < str.length; i++) {
            c = str.charCodeAt(i);
            if (c == 32 || c == 10 || c == 13 || c == 9 || c == 12 || c == 11 || c == 160 || c == 5760 || c == 6158 || c == 8192 || c == 8193 || c == 8194 || c == 8195 || c == 8196 || c == 8197 || c == 8198 || c == 8199 || c == 8200 || c == 8201 || c == 8202 || c == 8232 || c == 8233 || c == 8239 || c == 8287 || c == 12288 || c == 65279)
            continue; else break;
        }
        for (var j = str.length - 1; j >= i; j--) {
            c = str.charCodeAt(j);
            if (c == 32 || c == 10 || c == 13 || c == 9 || c == 12 || c == 11 || c == 160 || c == 5760 || c == 6158 || c == 8192 || c == 8193 || c == 8194 || c == 8195 || c == 8196 || c == 8197 || c == 8198 || c == 8199 || c == 8200 || c == 8201 || c == 8202 || c == 8232 || c == 8233 || c == 8239 || c == 8287 || c == 12288 || c == 65279)
            continue; else break;
        }
        return str.substring(i, j + 1);
    };
    else var mytrim = function(str) {
        return str.trim();
    }

Use it this way:

var foo = mytrim(" \n \t Trimmed \f \n "); // foo is now "Trimmed"

The above mytrim() does the following:

• Trims 26 different whitespaces (all of 25 whitespaces mentioned in http://perfectionkills.com/whitespace-deviations/ and additionally uFEFF, which is ZERO WIDTH NO-BREAK SPACE.
• Makes trimming results consistent across browsers.
• Uses native trim() if it is available AND has ability to trim all of 27 different whitespaces. The exception is Chrome and Chromium which both have so slow native trim() that instead of native we use our custom trim.
• AND THE MOST IMPORTANT: Is not beautiful and is not short, but IS CLEARLY FASTER than any of the 24 competitive alternatives in http://jsperf.com/mega-trim-test/12 (exception: rather old Firefox 3.6.25 in Windows 7 runs mytrim() rather slowly for unknown reason).

Answer 2

This is an old question but none of these worked for me. I just needed to trim leading and trailing white space and this is what I did. My div tag had an id = start-date.

$("#start-date").text().trim()

Answer 3

The answer to so many JavaScript questions: jQuery

$j.trim(string)

Note: the above assumes your jQuery has been setup with:

<script type="text/javascript">$j = jQuery.noConflict();</script>

Which is far more sensible than "$", and far less verbose than typing "jQuery" every time.

Answer 4

I use this with native JavaScript

// Adding trim function to String object if its not there
if(typeof String.prototype.trim !== 'function') {
  String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g, '');
  }
}

Use like this

var myString = "                  some text                  ";

alert(myString.trim());

Example

// Adding trim function to String object if its not there
if(typeof String.prototype.trim !== 'function') {
  String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g, '');
  }
}

var str = "      some text              ";
console.log(str.trim());

Answer 5

I use this:

Work with functions.

 function trim($) { 
                return (typeof $ == "function" ? $() : $).replace(/[\s]*/g,"")
        }

        code example: 

        trim((function(){ return "a  b"})) // ab

        trim(" a  b") //ab

Answer 6

Use Ariel Flesler's fast trim function:

// Licensed under BSD
function myBestTrim( str ){
 var start = -1,
  end = str.length;
 while( str.charCodeAt(--end) < 33 );
 while( str.charCodeAt(++start) < 33 );
 return str.slice( start, end + 1 );
};

My solution, though, would be this (because the String object in Firefox 3.5 and above already has a trim method):

String.prototype.trim = String.prototype.trim || function () {
    var start = -1,
        end   = this.length;

    while( this.charCodeAt(--end) < 33 );
    while( this.charCodeAt(++start) < 33 );

    return this.slice( start, end + 1 );
};