Smart way to truncate long strings

Question

Does anyone have a more sophisticated solution library for truncating strings with JavaScript and putting an ellipsis on the end  than the obvious one   if  string length  gt  25      string   string substring 0  24

User · Answer

Perhaps I missed an example of where someone is handling nulls, but 3 TOP answers did not work for me when I had nulls ( Sure I realize that error handling is and million other things is NOT the responsibility of the person answering the question, but since I had used an existing function along with one of the excellent truncation ellipsis answers I thought I would provide it for others.

e.g.

javascript:

news.comments

using truncation function

news.comments.trunc(20, true);

However, on news.comments being null this would "break"

Final

checkNull(news.comments).trunc(20, true)

trunc function courtesy of KooiInc

String.prototype.trunc =
 function (n, useWordBoundary) {
     console.log(this);
     var isTooLong = this.length > n,
         s_ = isTooLong ? this.substr(0, n - 1) : this;
     s_ = (useWordBoundary && isTooLong) ? s_.substr(0, s_.lastIndexOf(' ')) : s_;
     return isTooLong ? s_ + '&hellip;' : s_;
 };

My simple null checker (checks for literal "null" thing too (this catches undefined, "", null, "null", etc..)

  function checkNull(val) {
      if (val) {
          if (val === "null") {
              return "";
          } else {
              return val;
          }
      } else {
          return "";
      }
  }

User · Answer

With a quick Googling I found this    Does that work for you          Truncate a string to the given length  breaking at word boundaries and adding an elipsis     param string str String to be truncated     param integer limit Max length of the string     return string     var truncate   function  str  limit        var bits  i      if  STR     typeof str            return               bits   str split          if  bits length  gt  limit            for  i   bits length - 1  i  gt  -1  --i                if  i  gt  limit                    bits length   i                            else if          bits i                     bits length   i                  break                                  bits push                   return bits join            END  truncate

User · Answer

All modern browsers now support a simple CSS solution for automatically adding an ellipsis if a line of text exceeds the available width   p       white-space  nowrap      overflow  hidden      text-overflow  ellipsis       Note that this requires the width of the element to be limited in some way in order to have any effect    Based on https   css-tricks com snippets css truncate-string-with-ellipsis    It should be noted that this approach does not limit based on the number of characters  It also does not work if you need to allow multiple lines of text

User · Answer

c harm s answer is in my opinion the best  Please note that if you want to use    My string  truncate n    you will have to use a regexp object constructor rather than a literal  Also you ll have to escape the  S when converting it   String prototype truncate       function n           var p    new RegExp     0     n        S      g            var re   this match p           var l    re 0  length          var re   re 0  replace   s                 if  l  lt  this length  return re     amp hellip

User · Answer

I always use the cuttr js library to truncate strings and add custom ellipsis   x000D   x000D  new Cuttr   container         options here   truncate   words     length  8    ending              x000D   lt script src  https   unpkg com cuttr 1 1 1 dist cuttr min js  gt  lt  script gt   lt p class  container  gt Lorem ipsum dolor sit amet  consetetur sadipscing elitr  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat  sed diam voluptua  At vero eos et accusam et justo duo dolores et ea rebum  Stet clita kasd gubergren  no sea takimata sanctus est Lorem ipsum dolor sit amet   lt  p gt  x000D   x000D   x000D   This is bar far the easiest method  and doesn t have any dependencies  I know to cut strings with JS and its also available as jQuery plugin

User · Answer

Most modern Javascript frameworks  JQuery  Prototype  etc     have a utility function tacked on to String that handles this   Here s an example in Prototype    Some random text  truncate 10      - gt   Some ra       This seems like one of those functions you want someone else to deal with maintain   I d let the framework handle it  rather than writing more code

User · Answer

Text-overflow  ellipsis is the property you need  With this and an overflow hidden with a specific width  everything surpassing that will get the three period effect at the end     Don t forget to add whitespace nowrap or the text will be put in multiple lines    wrap    text-overflow  ellipsis   white-space  nowrap    overflow  hidden    width  your desired width      lt p class  wrap  gt The string to be cut lt  p gt

User · Answer

Here s my solution  which has a few improvements over other suggestions   String prototype truncate   function        var re   this match     0 25   S          var l   re 0  length      var re   re 0  replace   s            if l  lt  this length          re   re     amp hellip        return re         This is a short string  truncate     This is a short string       Thisstringismuchlongerthan25characters  truncate     Thisstringismuchlongerthan25characters       This string is much longer than 25 characters and has spaces  truncate     This string is much longer amp hellip     It    Truncates on the first space after 25 characters Extends the JavaScript String object  so it can be used on  and chained to  any string  Will trim the string if truncation results in a trailing space  Will add the unicode hellip entity  ellipsis  if the truncated string is longer than 25 characters

User · Answer

Use following code   function trancateTitle  title        var length   10      if  title length  gt  length           title   title substring 0  length                   return title

User · Answer

Here are my solutions with word boundary   x000D   x000D  let s    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident  similique sunt in culpa qui officia deserunt mollitia animi  id est laborum et dolorum fuga  Et harum quidem rerum facilis est et expedita distinctio  Nam libero tempore  cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus  omnis voluptas assumenda est  omnis dolor repellendus  Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae  Itaque earum rerum hic tenetur a sapiente delectus  ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat   let s split   s split   s     let word count   0  let result         1 for let i   0  word count  lt  100  i       word count    s split i  length 1    result     s split i            console log result      2 word count   0  result   s split reduce  x y   gt     word count   y length 1     if word count gt  100  return x    else return x     y        substring 1   console log result   x000D   x000D   x000D

User · Answer

There are valid reasons people may wish to do this in JavaScript instead of CSS   To truncate to 8 characters  including ellipsis  in JavaScript   short   long replace     7          1 amp hellip       or  short   long replace     7          1

User · Answer

Sometimes file names are numbered  where the index may be at the beginning or the end  So I wanted to shorten from the center of the string   function stringTruncateFromCenter str  maxLength        const midChar                  character to insert into the center of the result     var left  right       if  str length  lt   maxLength  return str          length of beginning part           left   Math ceil maxLength   2           start index of ending part        right   str length - Math floor maxLength   2    1          return str substr 0  left    midChar   str substring right       Be aware that I used a fill character here with more than 1 byte in UTF-8

User · Answer

This function do the truncate space and words parts also  ex  Mother into Moth     String prototype truc  function  length            return this length gt length   this substring 0  length      amp hellip     this      usage   quot this is long length text quot  trunc 10    quot 1234567890 quot  trunc 5    output   this is lo    12345

User · Answer

long text to be truncated   replace     250          1         Somehow above code was not working for some kind of copy pasted or written text in vuejs app  So I used lodash truncate and its now working fine     truncate  long text to be truncated      length   250   separator

User · Answer

You can use the Ext util Format ellipsis function if you are using Ext js

User · Answer

Somewhere Smart  D   x000D   x000D    My Huge Huge String x000D      let tooHugeToHandle    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout  The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters  as opposed to using  Content here  content here   making it look like readable English  Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text  and a search for  lorem ipsum  will uncover many web sites still in their infancy  Various versions have evolved over the years  sometimes by accident  sometimes on purpose  injected humour and the like    x000D       x000D    Trim Max Length x000D   const maxValue   50 x000D     The barber  x000D   const TrimMyString    string  maxLength  start   0    gt    x000D    Note -  start  is if I want to start after some point of the string x000D       if  string length  gt  maxLength    x000D       let trimmedString   string substr start  maxLength  x000D        return   x000D          trimmedString substr  x000D          start  x000D          Math min trimmedString length    trimmedString lastIndexOf       x000D                        x000D             x000D           x000D      return string x000D    x000D   x000D  console log TrimMyString tooHugeToHandle  maxValue   x000D   x000D   x000D

User · Answer

I like using  slice   The first argument is the starting index and the second is the ending index  Everything in between is what you get back   var long    hello there  Good day to ya      hello there  Good day to ya   var short    long slice 0  5     hello

User · Answer

Correcting Kooilnc s solution   String prototype trunc   String prototype trunc      function n         return this length gt n   this substr 0 n-1    amp hellip     this toString           This returns the string value instead of the String object if it doesn t need to be truncated

User · Answer

Use either lodash s truncate     truncate  hi-diddly-ho there  neighborino          hi-diddly-ho there  neighbo       or underscore string s truncate      Hello world   truncate 5     gt   Hello

User · Answer

Best function I have found  Credit to text-ellipsis   function textEllipsis str  maxLength    side    end   ellipsis                     if  str length  gt  maxLength        switch  side          case  start           return ellipsis   str slice - maxLength - ellipsis length          case  end         default          return str slice 0  maxLength - ellipsis length    ellipsis              return str      Examples   var short   textEllipsis  a very long text   10   console log short       a very       var short   textEllipsis  a very long text   10    side   start      console log short          ng text   var short   textEllipsis  a very long text   10    textEllipsis    END      console log short       a very END

User · Answer

Essentially  you check the length of the given string  If it s longer than a given length n  clip it to length n  substr or slice  and add html entity  amp hellip        to the clipped string  Such a method looks like function truncate str  n     return  str length  gt  n    str substr 0  n-1      amp hellip     str      If by  more sophisticated  you mean truncating at the last word boundary of a string then you need an extra check  First you clip the string to the desired length  next you clip the result of that to its last word boundary function truncate  str  n  useWordBoundary      if  str length  lt   n    return str      const subString   str substr 0  n-1      the original check   return  useWordBoundary        subString substr 0  subString lastIndexOf  quot   quot           subString     quot  amp hellip  quot       You can extend the native String prototype with your function  In that case the str parameter should be removed and str within the function should be replaced with this  String prototype truncate   String prototype truncate     function   n  useWordBoundary      if  this length  lt   n    return this      const subString   this substr 0  n-1      the original check   return  useWordBoundary        subString substr 0  subString lastIndexOf  quot   quot           subString     quot  amp hellip  quot       More dogmatic developers may chide you strongly for that   quot Don t modify objects you don t own quot   I wouldn t mind though   An approach without extending the String prototype is to create your own helper object  containing the  long  string you provide and the beforementioned method to truncate it  That s what the snippet below does   x000D   x000D  const LongstringHelper   str   gt      const sliceBoundary   str   gt  str substr 0  str lastIndexOf          const truncate    n  useWordBoundary    gt           str length  lt   n   str       useWordBoundary              sliceBoundary str slice 0  n - 1               str substr 0  n - 1   amp hellip      return   full  str   truncate        const longStr   LongstringHelper  Lorem ipsum dolor sit amet  consectetur  adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore  magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation  ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute  irure dolor in reprehenderit in voluptate velit esse cillum dolore  eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non  proident  sunt in culpa qui officia deserunt mollit anim id est laborum     const plain   document querySelector   resultTruncatedPlain    const lastWord   document querySelector   resultTruncatedBoundary    plain innerHTML      longStr truncate  plain dataset truncateat     plain dataset onword   lastWord innerHTML      longStr truncate  lastWord dataset truncateat     lastWord dataset onword   document querySelector   resultFull   innerHTML   longStr full  x000D  body     font  normal 12px 15px verdana  arial     p     width  450px      resultTruncatedPlain before     content   Truncated  plain  n  attr data-truncateat         color  green      resultTruncatedBoundary before     content   Truncated  last whole word  n  attr data-truncateat         color  green      resultFull before     content   Full       color  green    x000D   lt p id  resultTruncatedPlain  data-truncateat  120  data-onword  0  gt  lt  p gt   lt p id  resultTruncatedBoundary  data-truncateat  120  data-onword  1  gt  lt  p gt   lt p id  resultFull  gt  lt  p gt  x000D   x000D   x000D   Finally  you can use css only to truncate long strings in HTML nodes  It gives you less control  but may well be viable solution   x000D   x000D  body     font  normal 12px 15px verdana  arial    margin  2rem      truncate     white-space  nowrap    overflow  hidden    text-overflow  ellipsis    width  30vw      truncate before    content  attr data-longstring       truncate hover  before     content  attr data-longstring     width  auto    height  auto    overflow  initial    text-overflow  initial    white-space  initial    background-color  white    display  inline-block    x000D   lt div class  truncate  data-longstring  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum   gt  lt  div gt  x000D   x000D   x000D

User · Answer

I upvoted Kooilnc s solution  Really nice compact solution  There s one small edge case that I would like to address  If someone enters a really long character sequence for whatever reason  it won t get truncated   function truncate str  n  useWordBoundary        var singular  tooLong   str length  gt  n      useWordBoundary   useWordBoundary    true          Edge case where someone enters a ridiculously long string      str   tooLong   str substr 0  n-1    str       singular    str search   s       -1    true   false      if  singular          str   useWordBoundary  amp  amp  tooLong   str substr 0  str lastIndexOf         str             return  tooLong   str     amp hellip     str

User · Answer

I recently had to do this and ended up with          Truncate a string over a given length and add ellipsis if necessary     param  string  str - string to be truncated     param  integer  limit - max length of the string before truncating     return  string  truncated string     function truncate str  limit        return  str length  lt  limit    str   str substring 0  limit  replace   w 3   gi              Feels nice and clean to me

User · Answer

Note that this only needs to be done for Firefox   All other browsers support a CSS solution  see support table    p       white-space  nowrap      width  100                        IE6 needs any width        overflow  hidden                   overflow  value must be different from  visible         -o-text-overflow  ellipsis        Opera  lt  11       text-overflow     ellipsis        IE  Safari  WebKit   Opera  gt   11  FF  gt  6        The irony is I got that code snippet from Mozilla MDC

[javascript] Smart way to truncate long strings

Examples related to javascript

Examples related to string

Examples related to truncation