Geek Answers Handbook

Trim string in the middle with javascript

Does anyone have a convenient way to crop a line in the middle? Sort of:

truncate ('abcdefghi', 8);

will result in

'abc...hi'

UPDATE:

will be more complete

  • if the string is <= maxLength, returns a string
  • otherwise, return the version of the string, which is maxLength, with the piece deduced from the middle, and replace it with "...".
  • count the three characters "..." in total, so if maxLength is 8, you will only see 5 characters from the original string
+5
source share
6 answers

Here is one way to do this by breaking the line with substr:

var truncate = function (fullStr, strLen, separator) {
    if (fullStr.length <= strLen) return fullStr;

    separator = separator || '...';

    var sepLen = separator.length,
        charsToShow = strLen - sepLen,
        frontChars = Math.ceil(charsToShow/2),
        backChars = Math.floor(charsToShow/2);

    return fullStr.substr(0, frontChars) + 
           separator + 
           fullStr.substr(fullStr.length - backChars);
};

See example →

+17
source

Something like that...

function truncate(text, startChars, endChars, maxLength) {
    if (text.length > maxLength) {
        var start = text.substring(0, startChars);
        var end = text.substring(text.length - endChars, text.length);
        while ((start.length + end.length) < maxLength)
        {
            start = start + '.';
        }
        return start + end;
    }
    return text;
}
alert(truncate('abcdefghi',2,2,8));

Or limit the true ellipsis:

function truncate(text, startChars, endChars, maxLength) {
    if (text.length > maxLength) {
        var start = text.substring(0, startChars);
        var end = text.substring(text.length - endChars, text.length);
        return start + '...' + end;
    }
    return text;
}
alert(truncate('abcdefghi',2,2,8));

jsFiddle

0

"" , , jQuery, .

" "

0

CoffeeScript mVChr answer:

truncate = (str, length, separator = '...') ->
  return '' if str is null
  return str if str.length <= length

  pad = Math.round (length - separator.length) / 2
  start = str.substr(0, pad)
  end = str.substr(str.length - pad)

  [start, separator, end].join('')
0

@mvChr, @pipe Typescript.
-, @pipe, truncate.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncateString',
})
export class TreeHelperPipe implements PipeTransform {
  transform(fullStr: string, strLen: number, separator: string): any {
    if (fullStr.length < strLen) {
      return fullStr;
    }

    separator = separator || '...';

    const sepLen = separator.length,
      charsToShow = strLen - sepLen,
      frontChars = Math.ceil(charsToShow / 2),
      backChars = Math.floor(charsToShow / 2);

    return (
      fullStr.substr(0, frontChars) +
      separator +
      fullStr.substr(fullStr.length - backChars)
    );
  }
}

@pipe :

<span
  class="item-name"
  [text]="item.name | truncateString: 60"
  [title]="item.name"
></span>

@pipe , title ( ).

0

If you play PHP, you can name it, it works fine and can be configured for JS, I guess.

function middle_dots($crumb, $max=30){
  if(strlen($crumb) > $max)
  $crumb = substr_replace($crumb, '...', $max/2, round(-$max/2));
  return $crumb;
}

echo middle_dots('Some long text here would if longer than 30 chars get some ...');

Enjoy

Steve

-2
source

More articles:


All Articles