JavaScript智能文本换行与截断：基于正则表达式的实现

本文详细介绍了如何在javascript中实现文本的智能换行功能，使其根据指定的字符最大长度自动将长文本分割成多行。核心解决方案利用正则表达式，巧妙地处理了单词边界的保留（避免在单词中间换行）以及超长单词的强制截断，确保输出的每行文本长度符合要求，并提供了可直接使用的示例代码和详细解析。

文本换行需求解析

在前端开发或文本处理场景中，我们经常需要将一段连续的文本按照特定的最大字符长度进行分割，形成多行输出。这种分割并非简单地截断，而通常需要满足以下两个关键条件：

1. 尊重单词边界： 尽可能在单词之间进行换行，避免将一个单词从中间截断。
2. 处理超长单词： 如果某个单词本身的长度就超过了最大行长，则该单词需要被强制截断以符合长度限制。

传统的字符串截取方法往往难以同时满足这两点，例如，简单地使用 substring 或 slice 会在任意位置截断，破坏单词完整性。本文将介绍一种基于正则表达式的强大解决方案，能够优雅地实现这一复杂逻辑。

基于正则表达式的解决方案

解决此问题的核心在于构建一个能够智能匹配符合换行规则的文本块的正则表达式。我们将使用 String.prototype.matchAll 方法配合一个精心设计的正则表达式来提取所有符合条件的行。

核心正则表达式解析

假设我们希望每行的最大长度为 maxLen 个字符。以下是用于实现智能换行和截断的正则表达式：

立即学习“Java免费学习笔记（深入）”；

(?=\S).{0,${maxLen-1}}\S(?!\S)|\S{${maxLen}}

让我们逐一拆解这个正则表达式的组成部分：

麦艺画板(Max.art)

AI工业设计平台，专注于汽车设计，线稿、渲染、3D建模全流程覆盖

下载

1. | 分隔符： 这个符号表示“或”关系，意味着正则表达式会尝试匹配其左侧的模式，如果失败，则尝试匹配其右侧的模式。这对应了我们两种主要的换行策略：尊重单词边界的换行，以及强制截断超长单词的换行。

2. 左侧模式：(?=\S).{0,${maxLen-1}}\S(?!\S) 这个模式用于匹配那些在单词边界处换行的文本块。

   • (?=\S) (正向先行断言)： 这是一个非捕获性断言，它要求匹配的起始位置必须紧跟着一个非空白字符。它的作用是确保我们匹配的行不是以空白字符开头的，从而避免生成空行或以不必要的空格开头的行。
   • .{0,${maxLen-1}}： 匹配除换行符以外的任意字符0到 maxLen-1 次。这部分与后续的 \S 共同构成了行的主要内容，确保总长度不超过 maxLen。
   • \S： 匹配一个非空白字符。这保证了匹配到的文本块的最后一个字符是非空白字符，即行尾不会是空格。
   • (?!\S) (负向先行断言)： 这是一个非捕获性断言，它要求匹配的结束位置不能紧跟着一个非空白字符。换句话说，匹配的文本块后面必须是空白字符或者字符串的结束。这正是实现“尊重单词边界”的关键，它防止了在单词中间进行换行。

3. 右侧模式：\S{${maxLen}} 这个模式用于处理那些长度超过 maxLen 的超长单词。

   • \S{${maxLen}}： 匹配恰好 maxLen 个连续的非空白字符。当遇到一个非常长的单词，以至于左侧模式无法在 maxLen 范围内找到合适的单词边界时，这个模式就会介入，强制截断该单词，确保每行至少能容纳 maxLen 个非空白字符。

通过 | 将这两个模式结合，正则表达式首先尝试在单词边界处进行换行，如果无法在指定长度内找到合适的边界（即遇到超长单词），则会强制截断单词，从而优雅地解决了所有换行需求。

JavaScript 实现

在 JavaScript 中，我们可以通过 new RegExp() 构造函数动态地创建这个正则表达式，并结合 String.prototype.matchAll() 方法来获取所有匹配项。

/**
 * 将文本智能换行到指定的字符最大长度。
 * 尊重单词边界，并对超长单词进行截断。
 *
 * @param {string} str 待处理的原始文本。
 * @param {number} maxLen 每行的最大字符长度。
 * @returns {string[]} 包含换行后各行的字符串数组。
 */
function wrapLines(str, maxLen) {
    // 动态构建正则表达式
    // 'g' 标志表示全局匹配，查找所有匹配项
    // 'm' 标志表示多行模式，虽然在此特定场景下非必需，但通常用于处理多行文本
    const reg = new RegExp('(?=\\S).{0,' + (maxLen - 1) + '}\\S(?!\\S)|\\S{' + maxLen + '}', 'gm');

    // 使用 matchAll 查找所有匹配项，并将其转换为数组
    // m[0] 包含完整的匹配字符串
    return Array.from(str.matchAll(reg), (m) => m[0]);
}

// 示例文本
const sentence = `Wake has three meanings as a noun, and, yes, just about as many meanings as a verb! So get set. To wake is come out of sleep, a verb you'll recognize from "Wake up! You're asleep at the wheel!" You can wake feelings, as well as the people who are having them. The wake before the funeral caused Mike to wake from his depression and decide to live life to the fullest. His first act was to water ski; he eventually mastered staying upright while crossing the wake of the boat that was towing him.`;

// 调用函数进行换行，假设最大行长为100字符
console.log(wrapLines(sentence, 100));

// 期望的输出（部分展示，实际会根据文本和maxLen生成完整数组）
/*
[
  "Wake has three meanings as a noun, and, yes, just about as many meanings as a verb! So get",
  "set. To wake is come out of sleep, a verb you'll recognize from \"Wake up! You're asleep at",
  "the wheel!\" You can wake feelings, as well as the people who are having them. The wake",
  "before the funeral caused Mike to wake from his depression and decide to live life to the",
  "fullest. His first act was to water ski; he eventually mastered staying upright while",
  "crossing the wake of the boat that was towing him."
]
*/

// 测试更小的maxLen，例如10，以观察截断效果
console.log(wrapLines(sentence, 10));
/*
[
  "Wake has",
  "three",
  "meanings",
  "as a noun,",
  "and, yes,",
  "just about",
  "as many",
  "meanings",
  "as a verb!",
  "So get",
  "set. To",
  "wake is",
  "come out",
  "of sleep,",
  "a verb",
  "you'll",
  "recognize",
  "from \"Wake",
  "up! You're",
  "asleep at",
  "the wheel!",
  "\" You can",
  "wake",
  "feelings,",
  "as well",
  "as the",
  "people who",
  "are having",
  "them. The",
  "wake",
  "before the",
  "funeral",
  "caused Mike",
  "to wake",
  "from his",
  "depression",
  "and decide",
  "to live",
  "life to",
  "the",
  "fullest.",
  "His first",
  "act was",
  "to water",
  "ski; he",
  "eventually",
  "mastered",
  "staying",
  "upright",
  "while",
  "crossing",
  "the wake",
  "of the",
  "boat that",
  "was towing",
  "him."
]
*/

注意事项

• maxLen 的限制： 尽管代码允许 maxLen 为任意正整数，但如果 maxLen 过小（例如小于1），正则表达式的行为可能不符合预期或导致无限循环。在实际应用中，maxLen 通常会设定一个合理的最小值（例如10或更高）。
• 换行符处理： 默认情况下，.(点号) 不匹配换行符。这意味着如果原始文本中包含 \n，wrapLines 函数会将其视为普通字符，并可能导致换行符出现在行的中间。如果需要特殊处理原始文本中的换行符（例如，将它们视为硬换行并从那里开始新行），则需要对输入文本进行预处理或修改正则表达式。
• 性能： 对于极长的文本（例如数百万字符），正则表达式的匹配可能会有性能开销。在大多数常见场景下，这种方法是高效且可接受的。
• gm 标志： g 标志（global）是必需的，因为它指示 matchAll 查找所有匹配项，而不是只查找第一个。m 标志（multiline）在此特定正则表达式中并非严格必需，因为我们的模式主要关注字符和空白符，而不是行首行尾的锚点 ^ 和 $。但将其包含在内通常无害。

总结

通过巧妙地运用正则表达式的先行断言和“或”逻辑，我们可以构建一个强大的文本换行函数，它不仅能尊重单词边界，还能在必要时强制截断超长单词，从而满足各种复杂的文本布局需求。这种方法简洁、高效，并且易于集成到任何 JavaScript 项目中，为处理动态文本显示提供了专业且可靠的解决方案。