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

  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#

      @Wesley,
      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"
      document.write(newString);
      

      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"
    document.write(lastString);
    

    Does that do what you want?

    • Don

      Jon,
      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.

      Don

  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#

      @Sarmad,

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

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

      or

      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#

      @Sarmad,
      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#

      @Sarmad,
      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);
      document.write(newString);
      

      Example…

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

      Jon

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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