用javascript截断中间的字符串

Question

任何人都有一个方便的方法来截断中间的字符串？就像是：

truncate ('abcdefghi', 8);

会导致

'abc...hi'

更新：

更完整一点

• 如果字符串是<= maxLength，则返回字符串
• 否则，返回一个maxLength字符串的版本，从中间取出一个块，并替换为“...”。
• 计算总数中“...”的三个字符，因此如果maxLength为8，则只能看到原始字符串中的5个字符

Answer 1

这是用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 →

Answer 2

对于你正在寻找的东西，这可能有点'沉重'但是有一个jQuery插件可以做这种事情。

The "Three Dots" plugin

Answer 3

像这样......

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));

或限制为真省略号：

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

Answer 4

基于mVChr's answer的CoffeeScript版本：

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

Answer 5

依靠@mvChr解决方案，我建议使用带有Typescript的@pipe。 首先，您需要创建一个@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属性（在天桥窗口中显示文本）。

Answer 6

如果你正在玩PHP，你可以调用它，工作正常，可以调整到JS我认为。

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 ...');

请享用

史蒂夫