截断长字符串的聪明方法

通过快速谷歌搜索，我找到了这…这对你有用吗?

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

本质上，检查给定字符串的长度。如果它长于给定的长度n，将其剪辑为长度n (substr或slice)，并将html实体…(…)添加到剪辑的字符串中。

这样的方法看起来像

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

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

更教条的开发者可能会因此强烈地责备你("不要修改不属于你的对象"不过我不介意)。

const LongstringHelper = str => {
const sliceBoundary = str => str.substr(0, str.lastIndexOf(" "));
const truncate = (n, useWordBoundary) =>
str.length <= n ? str : `${ useWordBoundary
? sliceBoundary(str.slice(0, n - 1))
: str.slice(0, n - 1)}&hellip;`;
return { full: str,  truncate };
};
const longStr = LongstringHelper(`Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum`);


const plain = document.querySelector("#resultTruncatedPlain");
const lastWord = document.querySelector("#resultTruncatedBoundary");
plain.innerHTML =
longStr.truncate(+plain.dataset.truncateat, !!+plain.dataset.onword);
lastWord.innerHTML =
longStr.truncate(+lastWord.dataset.truncateat, !!+lastWord.dataset.onword);
document.querySelector("#resultFull").innerHTML = longStr.full;

body {
font: normal 12px/15px verdana, arial;
}


p {
width: 450px;
}


#resultTruncatedPlain:before {
content: 'Truncated (plain) n='attr(data-truncateat)': ';
color: green;
}


#resultTruncatedBoundary:before {
content: 'Truncated (last whole word) n='attr(data-truncateat)': ';
color: green;
}


#resultFull:before {
content: 'Full: ';
color: green;
}

<p id="resultTruncatedPlain" data-truncateat="120" data-onword="0"></p>
<p id="resultTruncatedBoundary" data-truncateat="120" data-onword="1"></p>
<p id="resultFull"></p>

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

body {
font: normal 12px/15px verdana, arial;
margin: 2rem;
}


.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 30vw;
}


.truncate:before{
content: attr(data-longstring);
}


.truncate:hover::before {
content: attr(data-longstring);
width: auto;
height: auto;
overflow: initial;
text-overflow: initial;
white-space: initial;
background-color: white;
display: inline-block;
}

<div class="truncate" data-longstring="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."></div>

大多数现代Javascript框架(JQuery， 原型， 等…)在String上附加了一个实用函数来处理这个问题。

下面是Prototype中的一个例子:

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

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

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

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对象， 因此它可以用于(并链接到) 李任何字符串。< / >
• 如果截断将修剪字符串 结果是一个尾随空格;
• 将添加unicode帮助实体 (省略号)如果截断的字符串长于25个字符

注意，这只需要在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获得了该代码片段。

所有现代浏览器现在支持一个简单的CSS解决方案，自动添加省省号，如果一行文本超过可用宽度:

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

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

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

应该注意的是，这种方法基于字符数进行不限制。如果你需要允许多行文本，它也可以不工作。

如果你使用Ext.js，你可以使用Ext.util.Format.ellipsis函数。

在我看来，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;';
};

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

使用以下代码

 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)+'…' : this.toString();
};

如果不需要截断string对象，则返回string值而不是string对象。

也许我错过了一个例子，有人在处理空值，但3 TOP答案不适合我，当我有空值(当然，我意识到错误处理是和百万其他事情不是回答这个问题的人的责任，但由于我已经使用了一个现有的函数以及一个优秀的截断省略答案，我想我将为其他人提供它。

如。

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_;
};

我简单的空检查器(检查文字“空”的东西 (这捕获未定义，""，null， "null"，等等..)

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

使用任意lodash的截断

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

或下划线。字符串的截断。

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

人们希望用JavaScript而不是CSS来实现这一点是有充分理由的。

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

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

或

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

我最近不得不这样做，最后得到:

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

对我来说感觉很好很干净:)

该功能还可以截断空格和文字部分。(例如:母亲变成飞蛾……)

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年……

有时文件名是编号的，其中索引可能在开头或结尾。所以我想从弦的中心开始缩短:

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个字节的填充字符。

最好的函数。功劳归text-ellipsis。

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"

我喜欢使用.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))

Text-overflow:省略号是您需要的属性。有了这个和一个溢出:隐藏在一个特定的宽度，超过它的所有东西将在最后得到三个周期的效果……不要忘记添加空格:nowrap或文本将被放入多行。

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

('long text to be truncated').replace(/(.{250})..+/, "$1…");

不知何故，上面的代码是不工作的某种复制粘贴或书面文本在vuejs应用程序。所以我使用lodash截断和它现在工作正常。

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

我总是使用cut .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插件使用。

这里是我的解决方案与字边界。

let s = "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
let s_split = s.split(/\s+/);
let word_count = 0;
let result = "";
//1
for(let i = 0; word_count < 100; i++){
word_count += s_split[i].length+1;
result += (s_split[i] + " ");
}
console.log(result);
// 2
word_count = 0;
result = s_split.reduce((x,y)=>{
word_count+=(y.length+1);
if(word_count>=100) return x;
else return x+" "+y;}, "").substring(1);
console.log(result);

如果你想用css而不是JavaScript;

.textShortDesc { /*Here we have determined the max number of lines.*/
display: block; /* or inline-block */
-o-text-overflow: ellipsis; /* Opera < 11*/
text-overflow: ellipsis; /* IE, Safari (WebKit), Opera >= 11, FF > 6 */
word-wrap: break-word;
overflow: hidden;
max-height: 2em; /*max-height/line-height=rowCount */
line-height: 1em;
}

我不确定这是否算聪明，但它简洁明了:

truncateStringToLength (string, length) {
return (string.length > length)
? `${string.substring(0, length)} …`
: string
}

……然后:

truncateStringToLength('Lorem ipsum dolor sit amet, consetetur sadipscing', 20)