如何将字符串中的空白字符（包括连续空格）保留为独立数组元素-js教程-PHP中文网

如何将字符串中的空白字符（包括连续空格）保留为独立数组元素

本文介绍在 JavaScript 中精确分割字符串并保留原始空白字符（如连续空格）作为独立数组元素的方法，避免 split() 丢弃或合并空白，适用于日志解析、格式化文本处理等场景。

本文介绍在 javascript 中精确分割字符串并保留原始空白字符（如连续空格）作为独立数组元素的方法，避免 `split()` 丢弃或合并空白，适用于日志解析、格式化文本处理等场景。

JavaScript 的 String.prototype.split(" ") 方法会以单个空格为分隔符，自动跳过连续空格和末尾空格，导致 "Hello World " 被拆分为 ["Hello", "World", ""]（末尾空字符串常被忽略），无法满足「将连续空格作为独立元素保留」的需求。

✅ 正确思路：用正则匹配替代分割

核心策略是不依赖分隔符逻辑，而是主动提取两类内容：

非空白字符组成的“词”（支持字母、数字、下划线）
连续的空白字符（\s{1,}）

推荐使用 String.prototype.match() 配合正则表达式：

const convertToArray = (txt) => {
  return txt.match(/\s{1,}|\S+/g) || [];
};

console.log(convertToArray("Hello World   "));
// → ["Hello", "World", "   "]

console.log(convertToArray("   Hello World!    and\tbye\n"));
// → ["   ", "Hello", "World!", "    ", "and", "\t", "bye", "\n"]

? 正则说明：

\s{1,} 匹配一个或多个空白字符（空格、制表符、换行等）

\S+ 匹配一个或多个非空白字符（比 \b(.+?)\b 更简洁可靠，且兼容标点符号如 !）

g 标志确保全局匹配所有片段

|| [] 防止空字符串输入返回 null

⚠️ 注意事项

不要使用 .filter(v => v !== " ")：这会错误地剔除所有单个空格，而我们恰恰需要保留它们（哪怕只有一个）。
split(" ") 无法满足需求：它本质是“以空格为界切开”，天然丢失空白的结构信息；而 match 是“按模式捕获”，能忠实还原原始空白序列。
若需区分空格与其他空白符（如仅保留普通空格，排除 \t 或 \n），可将 \s 替换为 ` `（字面空格）：
```
txt.match(/ +|\S+/g) // 仅匹配连续空格或非空白块
```

? 进阶：完全自定义分组逻辑（可选）

当需要更精细控制（例如严格按字符相邻关系分组，或保留单个空格/多个空格的不同语义），可采用手动遍历解析：

function parseByWhitespaceBoundary(str) {
  if (!str) return [];
  const result = [];
  let current = str[0];

  for (let i = 1; i <p>该方法时间复杂度 O(n)，逻辑清晰，适合对空白类型无特殊要求但强调「相邻相同类型字符必须归为一组」的场景。</p><h3>✅ 总结</h3>