有没有人有一个更复杂的解决方案/库,用JavaScript截断字符串,并在末尾放一个省略号,比明显的一个:
if (string.length > 25) {
string = string.substring(0, 24) + "...";
}
有没有人有一个更复杂的解决方案/库,用JavaScript截断字符串,并在末尾放一个省略号,比明显的一个:
if (string.length > 25) {
string = string.substring(0, 24) + "...";
}
当前回答
我喜欢使用.slice(),第一个参数是开始索引,第二个是结束索引。介于两者之间的都是你能得到的。
var long = "hello there! Good day to ya."
// hello there! Good day to ya.
var short = long.slice(0, 5)
// hello
其他回答
使用任一lodash的截断
_.truncate('hi-diddly-ho there, neighborino');
// → 'hi-diddly-ho there, neighbo…'
或下划线。字符串截断。
_('Hello world').truncate(5); => 'Hello...'
最好的函数。归功于文本省略。
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"
以下是我的解决方案,与其他建议相比有一些改进:
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 + "…";
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…"
It:
在25之后的第一个空格上截断 字符 扩展JavaScript字符串对象, 因此它可以用于(并链接到) 任何字符串。 如果截断将修剪字符串 结果在一个尾随空间中; 是否添加unicode hellip实体 (省略号)如果截断的字符串长于25个字符
大多数现代Javascript框架(JQuery, Prototype等)都有一个附加在String上的实用函数来处理这个问题。
下面是Prototype中的一个例子:
'Some random text'.truncate(10);
// -> 'Some ra...'
这似乎是您希望其他人处理/维护的功能之一。我会让框架来处理它,而不是编写更多的代码。
所有现代浏览器现在都支持一个简单的CSS解决方案,当一行文本超过可用宽度时自动添加省略号:
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
(请注意,这需要以某种方式限制元素的宽度,以便产生任何效果。)
基于https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/。
应该注意的是,这种方法并不基于字符的数量进行限制。如果需要允许多行文本,它也不能工作。