巧妙的方式来缩短长的string与JavaScript

有没有人有一个更复杂的解决scheme/库来缩短string与JavaScript，比明显的一个：

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

Answer 1

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

现在你可以做：

 var s = 'not very long'; s.trunc(25); //=> not very long s.trunc(5); //=> not ... 

如果“更复杂”，你的意思是截断string的最后一个字的边界，那么这可能是你想要的：

 String.prototype.trunc = function( n, useWordBoundary ){ if (this.length <= n) { return this; } var subString = this.substr(0, n-1); return (useWordBoundary ? subString.substr(0, subString.lastIndexOf(' ')) : subString) + "&hellip"; }; 

现在你可以这样做：

 s.trunc(11,true) //=>not very... 

如果你不想扩展本地对象，你可以使用：

 function truncate( n, useWordBoundary ){ if (this.length <= n) { return this; } var subString = this.substr(0, n-1); return (useWordBoundary ? subString.substr(0, subString.lastIndexOf(' ')) : subString) + "&hellip"; }; // usage truncate.apply(s, [11, true]); //=>not very... 

Answer 2

请注意，这只需要为Firefox做。

所有其他浏览器都支持CSS解决scheme（请参阅支持表 ）：

 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获得了代码片段。

Answer 3

这是我的解决scheme，其中有一些改进比其他build议：

 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对象，因此可以在任何string上使用（和链接）。
• 如果截断导致尾随空格，将修剪string;
• 如果截断的string长于25个字符，将添加unicode hellip实体（省略号）

Answer 4

使用lodash的截断

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

或underscore.string的截断 。

 _('Hello world').truncate(5); => 'Hello...' 

Answer 5

大多数现代的Javascript框架（ JQuery ， Prototype 等 ）都有一个实用的function，可以处理这个function。

原型中有一个例子：

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

这似乎是你希望别人处理/维护的function之一。 我会让框架处理它，而不是写更多的代码。

Answer 6

有人可能希望用JavaScript而不是CSS来做这件事。

在JavaScript中截断为8个字符：

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

Answer 7

也许我错过了某个人正在处理空值的例子，但是当我有空值的时候，3个TOP答案对我来说不起作用（当然，我意识到error handling和其他一百万个事情不是回答这个问题的人的责任，我曾经使用过一个现有的函数，以及我认为我会为其他人提供的一个优秀的截断省略号答案。

例如

JavaScript的：

 news.comments 

使用截断函数

 news.comments.trunc(20, true); 

然而，在news.comments为空这将“打破”

最后

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

Trunc函数由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_ + '…' : s_; }; 

我简单的空检查器（也检查文字“空”的东西（这捕获未定义的，“”，空，“空”等）。

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

Answer 8

所有现代浏览器现在都支持一个简单的CSS解决scheme，用于在文本行超出可用宽度时自动添加省略号：

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

（请注意，这需要以某种方式限制元素的宽度以产生任何效果。）

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

应该指出的是，这种方法不会根据字符数量进行限制。 如果您需要允许多行文本，它也不起作用。

Answer 9

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

Answer 10

我提出了Kooilnc的解决scheme。 真的很好的紧凑解决scheme。 我想谈谈一个小小的案例。 如果有人因为某种原因input了一个非常长的字符序列，它将不会被截断：

 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 + '…' : str; } 

Answer 11

随着谷歌search，我发现这 …这对你有用吗？

 /** * 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 

Answer 12

c_harm的回答在我看来是最好的。 请注意，如果你想使用

 "My string".truncate(n) 

你将不得不使用正则expression式对象构造函数而不是文字。 当你转换它时，你也必须逃避\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;'; }; 

Answer 13

使用下面的代码

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

Answer 14

纠正Kooilnc的解决scheme：

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

这将返回string值而不是String对象，如果它不需要被截断。

Answer 15

我最近不得不这样做，结果是：

 /** * 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) + '...'; } 

感觉很好，干净的我:)

Answer 16

这个函数也做截断空间和单词部分（例如：母亲进入蛾…）

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

用法：

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

输出：

这是…

12345 …