截断长字符串的智能方法

2020/10/19 06:21 · javascript ·  · 0评论

有没有人比显而易见的解决方案/库更复杂的解决方案/库,用于使用JavaScript截断字符串并在末尾加上省略号:

if (string.length > 25) {
  string = string.substring(0, 24) + "...";
}

本质上,您检查给定字符串的长度。如果长度超过给定的长度n,请将其裁剪为length nsubstrslice),然后将html实体…(…)添加到裁剪的字符串中。

这样的方法看起来像

function truncate(str, n){
  return (str.length > n) ? str.substr(0, n-1) + '…' : str;
};

如果“更复杂”是指在字符串的最后一个单词边界处截断,则需要进行额外的检查。首先,将字符串裁剪为所需的长度,然后将其结果裁剪为其最后一个单词的边界

function truncate( str, n, useWordBoundary ){
  if (str.length <= n) { return str; }
  const subString = str.substr(0, n-1); // the original check
  return (useWordBoundary 
    ? subString.substr(0, subString.lastIndexOf(" ")) 
    : subString) + "&hellip;";
};

您可以String使用函数扩展本机原型。在这种情况下,str应删除参数,并str在函数内将其替换为this

String.prototype.truncate = String.prototype.truncate || 
function ( n, useWordBoundary ){
  if (this.length <= n) { return this; }
  const subString = this.substr(0, n-1); // the original check
  return (useWordBoundary 
    ? subString.substr(0, subString.lastIndexOf(" ")) 
    : subString) + "&hellip;";
};

更具教条主义的开发人员可能会对此深表歉意(“不要修改您不拥有的对象”。不过我不介意)。

不扩展String原型的一种方法是创建自己的帮助对象,其中包含您提供的(长)字符串以及前面提到的截断它的方法。这就是下面的代码片段。

最后,您只能使用css截断HTML节点中的长字符串。它给您的控制较少,但可能是可行的解决方案。

请注意,这只需要针对Firefox完成。

所有其他浏览器都支持CSS解决方案(请参阅支持表):

p {
    white-space: nowrap;
    width: 100%;                   /* IE6 needs any width */
    overflow: hidden;              /* "overflow" value must be different from  visible"*/ 
    -o-text-overflow: ellipsis;    /* Opera < 11*/
    text-overflow:    ellipsis;    /* IE, Safari (WebKit), Opera >= 11, FF > 6 */
}

具有讽刺意味的是,我从Mozilla MDC获得了该代码段。

人们可能有理由希望使用JavaScript而不是CSS进行此操作。

在JavaScript中将其截断为8个字符(包括省略号):

short = long.replace(/(.{7})..+/, "$1&hellip;");

要么

short = long.replace(/(.{7})..+/, "$1…");

使用lodash的截断

_.truncate('hi-diddly-ho there, neighborino');
// → 'hi-diddly-ho there, neighbo…'

underscore.string的truncate

_('Hello world').truncate(5); => 'Hello...'
('long text to be truncated').replace(/(.{250})..+/, "$1…");

以上代码某种程度上不适用于vuejs应用程序中的某种复制粘贴或书面文本。所以我用lodash截断了,现在可以正常工作了。

_.truncate('long text to be truncated', { 'length': 250, 'separator': ' '});

这是我的解决方案,与其他建议相比有一些改进:

String.prototype.truncate = function(){
    var re = this.match(/^.{0,25}[\S]*/);
    var l = re[0].length;
    var re = re[0].replace(/\s$/,'');
    if(l < this.length)
        re = re + "&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&hellip;"

它:

  • 在25个字符后的第一个空格处截断
  • 扩展JavaScript String对象,因此可以在任何字符串上使用(并链接到它)。
  • 如果截断导致尾随空格,则将修剪字符串;
  • 如果截断的字符串超过25个字符,将添加unicode hellip实体(省略号)

我发现的最佳功能。归功于文字省略号

function textEllipsis(str, maxLength, { side = "end", ellipsis = "..." } = {}) {
  if (str.length > 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;
}

例子

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"

现在,所有现代浏览器都支持简单的CSS解决方案,如果一行文本超出了可用宽度,则会自动添加省略号:

p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

(请注意,这需要以某种方式限制元素的宽度,才能产生效果。)

基于https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

应当指出的是,这种方法并没有基于字符数限制。它也没有,如果你需要允许多行文本工作。

大多数现代JavaScript框架(JQuery的原型...)都上涨到字符串处理这一实用功能。

这是Prototype中的一个示例:

'Some random text'.truncate(10);
// -> 'Some ra...'

这似乎是您希望其他人处理/维护的功能之一。我会让框架处理它,而不是编写更多代码。

文本溢出:省略号是您需要的属性。有了这个和溢出:以特定的宽度隐藏,超出的所有内容将在最后得到三个周期的效果。...别忘了添加空白:nowrap,否则文本将被放置在多行中。

.wrap{
  text-overflow: ellipsis
  white-space: nowrap;
  overflow: hidden;
  width:"your desired width";
}
<p class="wrap">The string to be cut</p>

也许我错过了一个示例,其中有人在处理空值,但是当我有空值时,有3个TOP答案对我不起作用(当然,我知道错误处理是一百万个其他事情不是回答问题的人的责任,但是我使用了现有功能以及出色的截断省略号答案之一,我认为我会为其他人提供它。

例如

javascript:

news.comments

使用截断功能

news.comments.trunc(20, true);

但是,如果news.comments为null, 则将“中断”

最后

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

截断功能由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_;
 };

我简单的null检查器(也检查文字“ null”东西(它捕获未定义,“”,null,“ null”等)。

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

有时,文件名会被编号,其中索引可能位于开头或结尾。所以我想从字符串的中心开始缩短:

function stringTruncateFromCenter(str, maxLength) {
    const midChar = "…";      // character to insert into the center of the result
    var left, right;

    if (str.length <= 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);
}

请注意,我在UTF-8中使用的填充字符超过1个字节。

如果使用的是Ext.js,可以使用Ext.util.Format.ellipsis函数。

我赞成Kooilnc的解决方案。非常好的紧凑型解决方案。我想解决一个小问题。如果有人出于任何原因输入了一个很长的字符序列,它将不会被截断:

function truncate(str, n, useWordBoundary) {
    var singular, tooLong = str.length > 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 && tooLong ? str.substr(0, str.lastIndexOf(' ')) : str;
    }

    return  tooLong ? str + '&hellip;' : str;
}

快速浏览Google,我发现了这一点……对您有用吗?

/**
 * 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 > limit) {
        for (i = bits.length - 1; i > -1; --i) {
            if (i > limit) {
                bits.length = i;
            }
            else if (' ' === bits[i]) {
                bits.length = i;
                break;
            }
        }
        bits.push('...');
    }
    return bits.join('');
};
// END: truncate

我认为c_harm的答案是最好的。请注意,如果您想使用

"My string".truncate(n)

您将必须使用regexp对象构造函数而不是文字。另外\S,转换时必须转义

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 < this.length) return re + '&hellip;';
    };

使用以下代码

 function trancateTitle (title) {
    var length = 10;
    if (title.length > length) {
       title = title.substring(0, length)+'...';
    }
    return title;
}

纠正Kooilnc的解决方案:

String.prototype.trunc = String.prototype.trunc ||
  function(n){
      return this.length>n ? this.substr(0,n-1)+'&hellip;' : this.toString();
  };

如果不需要将其截断,则返回字符串值而不是String对象。

我最近不得不这样做,最终导致:

/**
 * 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 < limit) ? str : str.substring(0, limit).replace(/\w{3}$/gi, '...');
}

给我感觉很干净:)

我喜欢使用.slice()第一个参数是起始索引,第二个参数是结束索引。介于两者之间的一切就是您得到的回报。

var long = "hello there! Good day to ya."
// hello there! Good day to ya.

var short  = long.slice(0, 5)
// hello

聪明的地方:D

//My Huge Huge String
    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).`
    
//Trim Max Length
 const maxValue = 50
// The barber.
 const TrimMyString = (string, maxLength, start = 0) => {
//Note - `start` is if I want to start after some point of the string
    	if (string.length > maxLength) {
    	let trimmedString = string.substr(start, maxLength)
    	 return (
    	   trimmedString.substr(
    	   start,
    	   Math.min(trimmedString.length,   trimmedString.lastIndexOf(' '))
           ) + ' ...'
         )
       }
    return string
}

console.log(TrimMyString(tooHugeToHandle, maxValue))

我总是使用cuttr.js库截断字符串并添加自定义省略号:

new Cuttr('.container', {
  //options here
  truncate: 'words',
  length: 8,
  ending: '... ►'
});
<script src="https://unpkg.com/cuttr@1.1.1/dist/cuttr.min.js"></script>
<p class="container">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. </p>

这是我知道的最简单的方法(并且没有任何依赖性),它可以用JS剪切字符串,并且它也可以作为jQuery插件使用。

此功能还可以截断空格和单词部分。(例如:Mother into Moth ...)

String.prototype.truc= function (length) {
        return this.length>length ? this.substring(0, length) + '&hellip;' : this;
};

用法:

"this is long length text".trunc(10);
"1234567890".trunc(5);

输出:

这是...

12345 ...

本文地址:http://javascript.askforanswer.com/jieduanchangzifuchuandezhinengfangfa.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!