拆分一个字符串，在 JavaScript 中保留空白

作者

拆分一个保留空白的字符串

Split a String keeping the Whitespace in JavaScript

要拆分保留空格的字符串，请调用split()向其传递以下正则表达式的方法 – /(\s+)/。正则表达式在拆分字符串时使用捕获组来保留空格。

索引.js
const str = 'apple banana kiwi';

const results = str.split(/(\s+)/);

// 👇️ ['apple', ' ', 'banana', ' ', 'kiwi']
console.log(results);
如果您希望避免使用正则表达式，请向下滚动到下一部分。

我们传递给
String.split
方法的唯一参数是一个正则表达式。

正斜杠/ /标记正则表达式的开始和结束。

\s特殊字符匹配空格（空格、制表符、换行符）。

加号+匹配前面的项目（空格）一次或多次，换句话说，它将多个连续的空格折叠为 1。

括号()称为捕获组，允许我们匹配字符并将其包含在结果中。

下面是可视化捕获组如何工作的简单方法。

索引.js
console.log('abc'.split(/b/)); // 👉️ ['a', 'c']
console.log('abc'.split(/(b)/)); // 👉️ ['a', 'b', 'c']

第二个示例使用捕获组()来匹配b字符，但仍将其包含在结果中。

如果您希望避免使用正则表达式，则可以将调用链接到
split()和join()方法。

此方法仅适用于空格，不适用于制表符或换行符。
索引.js
const str = 'apple banana kiwi';

const result = str.split(' ').join('# #').split('#');
console.log(result); // 👉️ ['apple', ' ', 'banana', ' ', 'kiwi']

We first split the string on each space, to get an array containing the words in
the string.

index.js
const str = 'apple banana kiwi';

// 👇️ ['apple', 'banana', 'kiwi']
console.log(str.split(' '));

The next step is to convert the array to a string, by using the join() method.

index.js
const str = 'apple banana kiwi';

// 👇️ "apple# #banana# #kiwi"
console.log(str.split(' ').join('# #'));

We used a hash #, however we could have used any character, as long as there
is a space in the middle.

The last step is to split the string on each hash.

index.js
const str = 'apple banana kiwi';

const result = str.split(' ').join('# #').split('#');
console.log(result); // 👉️ ['apple', ' ', 'banana', ' ', 'kiwi']
Which approach you pick is a matter of personal preference. I’d go with the regular expression in this scenario because I find it more direct and intuitive. I would also add comments regarding how capturing groups work to improve readability.

–