Javascript 尝试在React组件中编写函数，该组件截断文本字符串并在15个单词后添加省略号

我有一个react组件，显示项目的描述。我正试图删掉任何超过15个单词的描述

我写了一个函数来实现这一点，但它总是在15个字符后而不是15个单词后截断字符串，我不确定我会错在哪里

我的职能：

const truncateDescription = (description) => {
  description = description.replace(/(^\s*)|(\s*$)/gi,"");
  description = description.replace(/[ ]{2,}/gi," ");
  description = description.replace(/\n /,"\n");

  descriptionLength = description.split(' ').length;
  return descriptionLength > 15 ? `${description.substring(0, 15)}...` : description;
}

我的反应组件：

const Item = ({ name, description }) => {
  return (
    <ItemContainer>
      <ItemName>{name}</ItemName>
      <ItemDescription>{truncateDescription(description)}</ItemDescription>
    </ItemContainer>
  );
};

const Item=（{name，description}）=>{
返回(
{name}
{截断描述（描述）}
);
};

---

您需要将单词拆分，获取长度，然后将单词切片并重新连接到适当的长度

我创建了一个名为

maxWordLength

的道具，用于限制字长。默认情况下，该值设置为

-1

（无限制）

App.jsx

从“/Item”导入项目；
常量应用=（）=>{
常量描述=
“Lorem Ipsum仅仅是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本，当时一家不知名的印刷商拿着一个打印厨房，抢着制作一本打印样本书。它不仅存活了五个世纪，而且还跨越到了电子排版，仍然是一本经典之作基本上没有变化。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近又随着包括Lorem Ipsum版本在内的Aldus PageMaker等桌面出版软件的发布而流行。”；
返回(
);
};
导出默认应用程序；

Item.jsx

从“道具类型”导入道具类型；
常量截断描述=（描述，maxLength=-1）=>{
常量词=描述
.trim（）
.replace（/[]{2，}/gi，”）
.替换（/\n/，“\n”）
.拆分（“”）；
返回maxLength！=-1&&words.length>maxLength
？`${words.slice（0，maxLength.join（“”）}`
：说明；
};
常量项目=（道具）=>{
const{description，maxWordLength=-1}=props；
返回{truncateDescription（description，maxWordLength）}；
};
Item.propTypes={
描述：需要PropTypes.string.isRequired，
maxWordLength:PropTypes.number
};
导出默认项；

您需要将单词拆分，获取长度，然后将单词切片并重新连接到适当的长度

我创建了一个名为

maxWordLength

的道具，用于限制字长。默认情况下，该值设置为

-1

（无限制）

App.jsx

从“/Item”导入项目；
常量应用=（）=>{
常量描述=
“Lorem Ipsum仅仅是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本，当时一家不知名的印刷商拿着一个打印厨房，抢着制作一本打印样本书。它不仅存活了五个世纪，而且还跨越到了电子排版，仍然是一本经典之作基本上没有变化。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近又随着包括Lorem Ipsum版本在内的Aldus PageMaker等桌面出版软件的发布而流行。”；
返回(
);
};
导出默认应用程序；

Item.jsx

从“道具类型”导入道具类型；
常量截断描述=（描述，maxLength=-1）=>{
常量词=描述
.trim（）
.replace（/[]{2，}/gi，”）
.替换（/\n/，“\n”）
.拆分（“”）；
返回maxLength！=-1&&words.length>maxLength
？`${words.slice（0，maxLength.join（“”）}`
：说明；
};
常量项目=（道具）=>{
const{description，maxWordLength=-1}=props；
返回{truncateDescription（description，maxWordLength）}；
};
Item.propTypes={
描述：需要PropTypes.string.isRequired，
maxWordLength:PropTypes.number
};
导出默认项；

import Item from "./Item";

const App = () => {
  const description =
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";

  return (
    <div className="App">
      <Item description={description} maxWordLength={15} />
    </div>
  );
};

export default App;

import PropTypes from "prop-types";

const truncateDescription = (description, maxLength = -1) => {
  const words = description
    .trim()
    .replace(/[ ]{2,}/gi, " ")
    .replace(/\n /, "\n")
    .split(" ");
  return maxLength !== -1 && words.length > maxLength
    ? `${words.slice(0, maxLength).join(" ")}...`
    : description;
};

const Item = (props) => {
  const { description, maxWordLength = -1 } = props;
  return <div>{truncateDescription(description, maxWordLength)}</div>;
};

Item.propTypes = {
  description: PropTypes.string.isRequired,
  maxWordLength: PropTypes.number
};

export default Item;