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"

Notes

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.

Example

abcdefghijklmnopqrstuvwxyz

Comments

  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 css-tricks.com/snippets/javascript/trim-firstlast-characters-in-string/ 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#

    Chris,
    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: https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent

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

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".