截断长字符串的聪明方法

有没有人有一个更复杂的解决方案/库，用JavaScript截断字符串，并在末尾放一个省略号，比明显的一个:

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

当前回答

使用任一lodash的截断

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

或下划线。字符串截断。

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

2016-04-08 13:37:31

其他回答

我在谷歌上快速搜索了一下，发现了这个……这对你有用吗?

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

2009-07-29 10:48:46

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

new Cuttr（'.container'， { 此处的选项截断：“单词”，长度： 8，结尾：“...►' }); <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.在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插件使用。

2020-08-06 18:44:15

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

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

2017-09-27 11:37:18

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

这样的方法看起来像

function truncate(str, n){
  return (str.length > n) ? str.slice(0, n-1) + '&hellip;' : 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应该被替换为:

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

更教条的开发人员可能会因此强烈地责备你(“不要修改你不拥有的对象”)。不过我不介意)。

一种不扩展String原型的方法是创建您自己的helper对象，包含您提供的(长)字符串和前面提到的截断方法。这就是代码片段下面。

最后，您可以使用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>

2009-07-29 10:56:50

使用任一lodash的截断

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

或下划线。字符串截断。

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

2016-04-08 13:37:31

截断长字符串的聪明方法

推荐文章

最新文章

标签