返回

轻松实现文本过长截取，只保留核心信息，代码简单，快速上手

前端

文本超长？巧用 JS 让重要信息脱颖而出

在网页设计中，我们经常会遇到文本内容过长的情况。为了让页面布局更加合理，提高用户阅读体验，我们需要对文本进行截取，只保留核心信息。今天，我们就来分享一个使用 JS 轻松实现文本中间显示省略号的方法，让重要信息脱颖而出。

了解问题所在

当文本内容过长时，我们需要截取字符串，只保留核心信息。但是，如何截取字符串，才能既保证信息完整，又不会影响阅读体验呢？

掌握截取字符串的方法

在 JS 中，我们可以使用 substring() 方法来截取字符串。该方法的语法如下：

substring(start, end)

其中，start 表示要截取的起始位置，end 表示要截取的结束位置。例如，如果我们想要截取字符串 "Hello World" 中的前三个字符，我们可以使用如下代码：

"Hello World".substring(0, 3)

结果将是 "Hel".

实现文本中间显示省略号

现在，我们已经掌握了截取字符串的方法，接下来就可以实现文本中间显示省略号了。思路如下：

  1. 计算文本的总长度。
  2. 计算截取后文本的长度。
  3. 如果截取后文本的长度大于等于总长度的一半，则截取前一半的文本，并在末尾加上省略号。
  4. 否则，截取后一半的文本，并在开头加上省略号。

代码实现

根据上述思路，我们可以编写如下代码：

function truncateText(text, maxLength) {
  // 计算文本的总长度
  const totalLength = text.length;

  // 计算截取后文本的长度
  const truncatedLength = maxLength - 3; // 减去省略号的长度

  // 如果截取后文本的长度大于等于总长度的一半，则截取前一半的文本，并在末尾加上省略号
  if (truncatedLength >= totalLength / 2) {
    return text.substring(0, truncatedLength) + "...";
  }

  // 否则，截取后一半的文本，并在开头加上省略号
  else {
    return "..." + text.substring(truncatedLength, totalLength);
  }
}

// 使用示例
const text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac ipsum diam. Sed euismod tristique massa, sit amet laoreet nisi convallis sed. Nunc lobortis mattis aliquam. Mauris euismod lectus eget lacus ultrices elementum. Nunc viverra eros eget leo tincidunt, sit amet ullamcorper ante aliquet. Donec euismod tempor lacus, ac tincidunt lacus ultricies eget. Mauris vitae lacus eget nunc tincidunt laoreet. Phasellus consectetur nibh ac nunc egestas, eget pulvinar turpis laoreet. Sed mollis turpis velit, eget tincidunt nisi ultricies ut.";
const maxLength = 100;

console.log(truncateText(text, maxLength));

结果将是：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac ipsum...

优化代码

上面的代码可以实现文本中间显示省略号的功能，但是还可以进一步优化。例如，我们可以使用正则表达式来截取字符串，这样可以提高代码的性能。优化的代码如下：

function truncateText(text, maxLength) {
  // 使用正则表达式来截取字符串
  const truncatedText = text.substring(0, maxLength - 3);
  return truncatedText + (truncatedText.length < text.length ? "..." : "");
}

// 使用示例
const text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac ipsum diam. Sed euismod tristique massa, sit amet laoreet nisi convallis sed. Nunc lobortis mattis aliquam. Mauris euismod lectus eget lacus ultrices elementum. Nunc viverra eros eget leo tincidunt, sit amet ullamcorper ante aliquet. Donec euismod tempor lacus, ac tincidunt lacus ultricies eget. Mauris vitae lacus eget nunc tincidunt laoreet. Phasellus consectetur nibh ac nunc egestas, eget pulvinar turpis laoreet. Sed mollis turpis velit, eget tincidunt nisi ultricies ut.";
const maxLength = 100;

console.log(truncateText(text, maxLength));

结果与之前相同，但代码更加简洁高效。

总结

以上就是 JS 实现文本中间显示省略号的方法，希望对大家有所帮助。在实际项目中，我们可以根据具体需求对代码进行修改，以达到最佳的效果。

常见问题解答

1. 如何修改省略号的样式？

你可以通过修改 CSS 样式来修改省略号的样式。例如，以下 CSS 代码可以将省略号设置成红色：

.truncated-text::after {
  content: "...";
  color: red;
}

2. 如何使用 JS 实现文本尾部显示省略号？

你可以使用以下 JS 代码实现文本尾部显示省略号：

function truncateTextEnd(text, maxLength) {
  // 使用正则表达式来截取字符串
  const truncatedText = text.substring(maxLength - 3);
  return (truncatedText.length < text.length ? "..." : "") + truncatedText;
}

3. 如何截取 HTML 文本？

你可以使用 innerHTML 属性来截取 HTML 文本。例如，以下代码将截取 <p> 元素中的前 100 个字符：

const text = document.querySelector("p").innerHTML;
const truncatedText = text.substring(0, 100);

4. 如何截取带有换行符的文本？

你可以使用 split() 方法来截取带有换行符的文本。例如，以下代码将截取前两行文本：

const text = "Line 1\nLine 2\nLine 3";
const truncatedText = text.split("\n").slice(0, 2).join("\n");

5. 如何截取并保留单词的完整性？

你可以使用 match() 方法来截取并保留单词的完整性。例如，以下代码将截取前两个单词：

const text = "This is a sentence";
const truncatedText = text.match(/\w+/g).slice(0, 2).join(" ");