IT技术 - 截断长字符串的智能方法 - 吾爱随笔录

截断长字符串的智能方法

IT技术 javascript string truncation

2021-02-02 08:02:33

有没有人有比明显的解决方案/库更复杂的解决方案/库来使用 JavaScript 截断字符串并在末尾添加省略号：

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

6个回答

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

这样的方法看起来像

function truncate(str, n){
  return (str.length > n) ? str.substr(0, n-1) + '&hellip;' : 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原型的方法是创建您自己的辅助对象，其中包含您提供的（长）字符串和前面提到的截断它的方法。这就是下面的代码片段所做的。

Show code snippet

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.substr(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 节点中的长字符串。它给您的控制较少，但很可能是可行的解决方案。

Show code snippet

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>

您可能会考虑的一件事是在您的代码示例…中用实际的省略号 ( ...)替换。如果您尝试使用它与 API 交互，您将需要非 HTML 实体。

2021-03-13 08:02:33

第二个参数 tosubstr是一个长度，因此应该将substr(0,n)其限制为第一个n字符。

2021-03-17 08:02:33

@RuneJeppesen 你是对的。调整了方法。为我辩护：答案可以追溯到 7 年前；)

2021-03-25 08:02:33

还应该考虑具有“硬”和“软”限制，例如，如果字符串超过 500 个字符，则将其截断为 400。当用户想要查看整个文本并单击某个链接时，这可能很有用为了它。因此，如果您只加载 1 或 2 个字符，它看起来会非常难看。

2021-03-27 08:02:33

不要修改您不拥有的对象。nczonline.net/blog/2010/03/02/...

2021-03-31 08:02:33

~~请注意，这只需要为 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 方法。可能有一个说明，这仅适用于单行文本（如预期的那样white-space: nowrap;）。当涉及到不止一行时，您就会被 JavaScript 困住。

2021-03-17 08:02:33

哇，这是移动 Safari 的完美解决方案。谢谢！

2021-03-18 08:02:33

它也仅适用于整个元素。如果您想截断字符串的一部分，而不将要截断的位包裹在 span 或其他 html 元素中，这将不起作用，例如：Your picture ('some very long picture filename truncated...') has been uploaded.

2021-03-29 08:02:33

mattsnider.com/css/css-string-truncation-with-ellipsis使其也适用于 FF。

2021-04-09 08:02:33

OP 专门询问 javascript 解决方案

2021-04-12 08:02:33

人们可能希望在 JavaScript 而不是 CSS 中执行此操作是有正当理由的。

在 JavaScript 中截断为 8 个字符（包括省略号）：

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

或者

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

如果算上省略号，这将是 9 个字符。如果截断后需要它是 8，请.replace(/^(.{7}).{2,}/, "$1…");改用

2021-03-13 08:02:33

long并且short被旧的 ECMAScript 规范（ECMAScript 1 到 3）保留为未来的关键字。请参阅MDN：旧标准中的未来保留关键字

2021-03-20 08:02:33

使用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，它现在工作正常。

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

不错的现代答案！

2021-03-14 08:02:33

这只是一个lorem ipsum

2021-03-30 08:02:33

我很想知道文本是什么。是否使用了非拉丁字符？

2021-04-11 08:02:33

其它你可能感兴趣的问题

上一篇提前退出函数？下一篇从网络浏览器获取 GPS 位置