首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用子字符串在React组件中裁切文本,而无需停止文字

使用子字符串在React组件中裁切文本,而无需停止文字
EN

Stack Overflow用户
提问于 2020-10-13 02:12:01
回答 2查看 67关注 0票数 0

我正在使用substring裁剪我的文本:

代码语言:javascript
运行
复制
const trimmedLead = lead.substring(0, 118) + '...'

但现在,它也打破了文字。如何在Javascript中实现同样的功能,但又不会破坏单词?

EN

回答 2

Stack Overflow用户

发布于 2020-10-13 02:21:41

获取子字符串,然后获取该子字符串的子字符串,直到最后一个空格,然后添加...

代码语言:javascript
运行
复制
const lead = '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 trimmedLead = lead.substring(0, 118)
                        .substring(0, lead.substring(0, 118).lastIndexOf(' ')) +
                        '...'
console.log({ trimmedLead, length: trimmedLead.length});

票数 0
EN

Stack Overflow用户

发布于 2020-10-13 02:31:19

你可以在你喜欢的地方拆分字符串,然后你可以检查第一部分是否以字符结束,第二部分是否以字符开始。如果这两个都是真的,你就拆分一个单词。如果拆分单词,请使用replace切回到单词边界的末尾。

代码语言:javascript
运行
复制
function trimDownToWord(string, maxLength) {
  if (string <= maxLength) {
    return string;
  }

  let first = string.substr(0, maxLength);
  const second = string.substr(maxLength);

  if (/\w$/.test(first) && /^\w/.test(second)) {
    first = first.replace(/\b[^\w]*\w+$/, '');
  }

  return first.trim() + '...';
}



const lead = `This is multiple words, many fun words to read!`

// Without word trimming:
const trimmedAtLength = lead.substring(0, 25) + '...';
console.log(trimmedAtLength);

// With word trimming:
const trimmedByWords = trimDownToWord(lead, 26);
console.log(trimmedByWords);

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64323199

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档