如何在JavaScript中用正则拆分含百分比与文本的字符串？

你可以使用正则表达式的替换功能直接实现需求，比拆分后再拼接更高效：

方法一：单次正则替换 #

使用带有捕获组的正则匹配每个「百分比 + 成分」单元，然后替换成目标格式：

const originalStr = "42% recycled nylon 41% nylon 17% elastane";
const targetStr = originalStr.replace(/(\d+%)\s+([\w\s]+?)(?=\s+\d+%|$)/g, "$1 <br>$2 <br>");

正则说明：

• (\d+%)：捕获百分比部分（比如42%）
• \s+：匹配百分比和成分之间的一个或多个空格
• ([\w\s]+?)：非贪婪捕获成分文本（比如recycled nylon），避免过度匹配到下一个百分比
• (?=\s+\d+%|$)：正向预查，确保成分文本后面跟着「空格+新百分比」或者字符串结尾

执行后targetStr的值就是你需要的：

42%
recycled nylon
41%
nylon
17%
elastane

方法二：基于你原有的拆分逻辑优化 #

如果你想继续用split实现，可以先按「空格+数字」拆分出每个「百分比+成分」单元，再对每个单元拆分百分比和成分，最后拼接：

const originalStr = "42% recycled nylon 41% nylon 17% elastane";
// 第一步：拆分出每个「百分比+成分」单元
const units = originalStr.split(/\s(?=\d)/);
// 第二步：对每个单元拆分百分比和成分，再用<br>连接，最后拼接所有单元并追加末尾的<br>
const targetStr = units.map(unit => unit.split(/(?<=\d%)\s/).join(" <br>")).join(" <br>") + " <br>";

拆分正则说明：

• (?<=\d%)\s：正向后顾，匹配「百分比后面的空格」，确保只在%之后拆分

内容的提问来源于stack exchange，提问作者burak mert intepe