SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Jan 2001
    Posts
    244
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trim long words or phrase with JavaScript

    Hello,
    I need to shorten some words or phrase that are longer than 40 characters and then add a "..." at the end of the trimmed string.

    For example, let's say that I have this string:
    "Ooh-Wakka-Doo-Wakka-Day is the longest word in a song."

    I want that with JavaScript display that trimed to a shorter one like this one:
    "Ooh-Wakka-Doo-Wakka-Day is the longest..."

    Would that be possible?
    Guillermo

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    String.prototype.trim = function( len )
    {
        return this.substring( 0, len ) + "...";
    }
    
    var myStr = "Ooh-Wakka-Doo-Wakka-Day is the longest word in a song.";
    myStr = myStr.trim( 40 );
    alert( myStr );
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Addict
    Join Date
    Jan 2001
    Posts
    244
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great!
    Thanks...
    Guillermo

  4. #4
    SitePoint Addict
    Join Date
    Jan 2001
    Posts
    244
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello.. I noticed that even if the string is shorter than 40 characters, it stills adds the "..." at the end. How can I set it to only show the "..." only if the string is longer than 40 characters?
    Guillermo

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2003
    Location
    San Diego
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    String.prototype.trim = function( len )
    {
        if(this.length() > len){
          return this.substring( 0, len ) + "...";
        } else {
          return this;
        }
    }
    
    var myStr = "Ooh-Wakka-Doo-Wakka-Day is the longest word in a song.";
    myStr = myStr.trim( 40 );
    alert( myStr );
    Kyle Maxwell
    www.kylemaxwell.com

  6. #6
    SitePoint Addict
    Join Date
    Jan 2001
    Posts
    244
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks...
    Guillermo

  7. #7
    SitePoint Addict
    Join Date
    Jan 2001
    Posts
    244
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    kyle, I get the JS error "Function Expected" when I try to load the page. The error happens on the line where it has "if(this.length() > len){". Then nothing happens... any ideas?

    Originally posted by kylemaxwell.com
    Code:
    String.prototype.trim = function( len )
    {
        if(this.length() > len){
          return this.substring( 0, len ) + "...";
        } else {
          return this;
        }
    }
    
    var myStr = "Ooh-Wakka-Doo-Wakka-Day is the longest word in a song.";
    myStr = myStr.trim( 40 );
    alert( myStr );
    Guillermo

  8. #8
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    length is a property, not a method. In otherwords, the () is messing it up. This is a simple function, so I'd use a ternary with it...
    Code:
    String.prototype.trim = function( len )
    {
        return ( this.length > len ) ? this.substring( 0, len ) + "..." : this;
    }
    But, if you don't like the ternary, you can use this
    Code:
    String.prototype.trim = function( len )
    {
        if ( this.length > len )
        {
        	return this.substring( 0, len ) + "...";
        }
        else
        {
        	return this;
        }
    }
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  9. #9
    SitePoint Addict
    Join Date
    Jan 2001
    Posts
    244
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks... the ternary worked fine.
    Guillermo

  10. #10
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually there is no need for a ternary or an if..else at all!

    You all seem to have forgotten that string positions start at 0, but the length property of string returns the number of characters in the string, so you must remember to subtract one from the value!!!

    Code:
    String.prototype.trim = function( len )
    {
          return this.substring( 0, len - 1 ) + "...";
    }
    You could further refine this function to trim only at word boundaries, and also subtract 4 instead of 1 so that the length of the returned string is <=40 (instead of 43), but naturally I'll leave these for YOU to do yourself (if you want to)!!!
    MarcusJT
    - former ASP web developer / former SPF "ASP Guru"
    - *very* old blog with some useful ASP code

    - Please think, Google, and search these forums before posting!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •