Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Trim First/Last Characters in String

Remove last four characters

var myString = "abcdefg";
var newString = myString.substr(0, myString.length-4); 
// newString is now "abc"

Remove first two characters

var myString = "abcdefg";
var newString = myString.substr(2);
// newString is now "cdefg"


The substr function can be called on any string with two integer parameters, the second optional. If only one provided, it starts at that integer and moves to the end of the string, chopping off the start. If two parameters provided, it starts at the first number and ends at the second, chopping off the start and end as it is able.



Trimming Whitespace

Here is a whole bunch of ways.


  1. Joshua
    Permalink to comment#

    The snippet on this page isn’t working for me, and is throwing the following error:

    $(‘#chopper’)[0].innerText is undefined

    Just a heads up!

  2. Pauly

    i already try to click the button ” Press to chop” but nothing happen, how come?

    • Pauly (and Joshua above) – Not seeing that error, can you let me know browser/version?

    • Firefox Mac, Version 27.0.1 here, not working.
      Chrome Mac, Version 33.0.1750.146 is working.
      Safari Mac, Version 6.1.1 (7537.73.11) is working.

      So it looks like you don’t Support Firefox. Wow.
      Console says:
      Error: TypeError: $(…)[0].innerText is undefined at on line 58

  3. Permalink to comment#

    I think the code snippet for the second example has a typo:
    var myString = “abcdefg”;
    var newString = myString_2.substr(2);

    The second line of this snippet should be:
    var newString = myString.substr(2);

    Thanks for the tip!

  4. Hridayeshwar Rao

    Thanks !!

  5. Jon
    Permalink to comment#

    Any specifics on why you chose String.**substr**( start [, length ] ) rather than String.**slice**( begin [, end ] )? I did a quick search and most recommend splice as it accepts a negative value for the end point without having to calc length?

    var myString = "abcdefg";
    var newString = myString.slice(0, -4); 
    // newString is now "abc"

    slice and dice …

    Just curious!

  6. Mike
    Permalink to comment#

    Chris, it seems FF does not support innerText. textContent would be the modern equivalent:

    But since we’re using jQuery anyway why not $(…).text() :)

  7. Wesley Williams
    Permalink to comment#

    How do you do both? Meaning how do you remove the first 9 char and the last 1 char in the same string

    • Jon R. Humphrey
      Permalink to comment#

      Sorry it was late last night but I’ve strung the two string modifiers mentioned below into one line:

      var myString = "abcdefghijklmnopqrstuvwxyz";
      var newString = myString.substr(9).slice(0, -1); 
      //newString is now "jklmnopqrstuvwxy"

      Here’s a pen showing it in action

  8. Jon R. Humphrey
    Permalink to comment#

    @Wesley what about this?

    var myString = "abcdefghijklmnopqrstuvwxyz";
    var firstString = myString.substr(9);
    //firstSring is now "jklmnopqrstuvwxyz"
    var lastString = firstString.slice(0, -1); 
    //lastString is now "jklmnopqrstuvwxy"

    Does that do what you want?

    • Don

      Thanks for this code snippet. I am more up to speed with PHP rather than Javascript and was looking around how to chop a string on both ends and this worked perfectly. TY.


  9. Permalink to comment#

    i tried with specific string to replace and worked. but i have a situation like this <span class='someclass'>someclass</span> to sometext is it possible

  10. Sarmad
    Permalink to comment#

    How about skipping some characters and removing the character afterwards?

    Like in abcdefgh how to start the trimming from d (making d the first character)

    • Jon R. Humphrey
      Permalink to comment#


      This would be the first part of the codeblock I showed above:

      var myString = "abcdefghijklmnopqrstuvwxyz";
      var firstString = myString.substr(3);


      var myString = "abcdefghijklmnopqrstuvwxyz";
      var firstString = myString.substr(myString.indexOf("d"));

  11. Sarmad
    Permalink to comment#

    Yes I got that, but I was asking about removing characters from the middle.

    Like abc(removing four characters)hijklmn

    • Jon R. Humphrey
      Permalink to comment#

      Does this work for you?

      var myString = "abcdefghijklmnopqrstuvwxyz";
      var firstString = myString.slice(0, myString.indexOf("d")+1);
      var lastString = myString.substr(myString.indexOf("d")+5);
      var newString = firstString.concat(lastString);

  12. Sarmad
    Permalink to comment#

    Exactly. I was looking for a way to trim something out from a url within <a>. This is working fine now. Thanks

    • Jon R. Humphrey
      Permalink to comment#

      you could also split the string on your search parameter and concat the two resulting array parts, like this:

      var myString = "abcdefghijklmnopqrstuvwxyz";
      var myArray = myString.split("defg");
      var firstString = myArray[0];
      var lastString = myArray[1];
      var newString = firstString.concat(lastString);


      It’s really down to how you want to find your “needle” string within your “haystack” string?


Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";