在开发过程中，我们经常会遇到需要操作逗号分隔字符串的场景，比如用户标签列表、权限标识集合等，其中最常见的需求就是从这类字符串中安全移除指定的单词，同时自动处理可能出现的边界逗号，避免出现连续逗号或者首尾逗号的问题。
常见的问题场景
假设我们有一个逗号分隔的字符串str，内容为"apple,banana,orange,banana,"，现在需要移除其中的"banana"这个单词，期望的结果是"apple,orange"，而不是直接替换后出现的"apple,,orange,"这种不符合预期的结果。
基础实现方案：分割拼接法
最直观的思路是将字符串按逗号分割成数组，过滤掉目标单词后再拼接回字符串，这种方式逻辑清晰，容易理解。
// 定义原始字符串和目标单词
const originStr = "apple,banana,orange,banana,";
const targetWord = "banana";
// 按逗号分割字符串，过滤掉目标单词，再拼接
const result = originStr.split(",")
.filter(item => item !== targetWord) // 过滤掉等于目标单词的元素
.join(","); // 用逗号拼接回字符串
console.log(result); // 输出 "apple,orange"
这种方法的优点是逻辑简单，没有复杂的正则知识也能实现，缺点是需要多次遍历数组，对于超长字符串来说性能稍弱，而且如果字符串中存在空元素（比如连续逗号产生的空字符串），也会被一起过滤掉，需要根据实际场景调整过滤条件。
高效实现方案：正则替换法
正则匹配可以一次性完成替换，不需要分割数组，性能更好，同时可以精准处理边界逗号的问题。
// 定义原始字符串和目标单词
const originStr = "apple,banana,orange,banana,";
const targetWord = "banana";
// 构造正则：匹配目标单词，同时处理前后逗号的情况
// 匹配规则：要么是开头的目标单词+逗号，要么是逗号+目标单词+逗号，要么是逗号+目标单词结尾，要么是单独的目标单词
const reg = new RegExp(`(^${targetWord},)|(,${targetWord},)|(,${targetWord}$)|(^${targetWord}$)`, "g");
// 替换匹配到的内容，根据匹配到的不同情况替换为对应的逗号或者空字符串
const result = originStr.replace(reg, (match) => {
if (match.startsWith(",") && match.endsWith(",")) {
// 匹配到 ",target," 的情况，替换为单个逗号
return ",";
} else if (match.endsWith(",")) {
// 匹配到 "target," 或者 ",target" 的情况，替换为空字符串
return "";
} else {
return "";
}
}).replace(/,,+/g, ","); // 处理可能出现的连续逗号，替换为单个逗号
console.log(result); // 输出 "apple,orange"
如果目标单词是固定的，也可以简化正则的构造，比如已知要移除banana，可以直接写正则：
const originStr = "apple,banana,orange,banana,";
// 直接匹配 banana 前后的逗号情况
const result = originStr.replace(/(^banana,)|(,banana,)|(,banana$)|(^banana$)/g, (match) => {
if (match === ",banana,") return ",";
return "";
}).replace(/,,+/g, ",");
console.log(result); // 输出 "apple,orange"
边界场景处理
实际使用中还会遇到一些特殊场景，需要额外处理：
- 如果原始字符串为空，直接返回空字符串即可，不需要做额外处理。
- 如果目标单词不存在于原始字符串中，直接返回原始字符串。
- 如果原始字符串只有目标单词，比如
"banana"，移除后应该返回空字符串。 - 如果原始字符串有首尾空格，比如
" apple , banana , orange "，需要先做去空格处理，或者调整正则匹配空格的情况。
针对带空格的场景，可以调整正则支持空格匹配：
const originStr = " apple , banana , orange , banana ,";
const targetWord = "banana";
// 正则中加入 s* 匹配可能的空格
const reg = new RegExp(`(^s*${targetWord}s*,)|(,s*${targetWord}s*,)|(,s*${targetWord}s*$)|(^s*${targetWord}s*$)`, "g");
const result = originStr.replace(reg, (match) => {
if (match.includes(`,${targetWord}`) && match.includes(`${targetWord},`)) {
return ",";
}
return "";
}).replace(/,,+/g, ",").trim(); // 最后 trim 去掉首尾可能的逗号或空格
console.log(result); // 输出 "apple,orange"
不同方案对比
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 分割拼接法 | 逻辑简单，易理解，无正则学习成本 | 性能稍弱，超长字符串效率低 | 字符串长度较短，快速实现需求 |
| 正则替换法 | 性能更好，一次匹配完成替换 | 正则构造稍复杂，需要理解匹配规则 | 字符串较长，追求性能，或者需要支持复杂匹配规则 |
实际开发中可以根据具体的场景选择合适的方案，如果字符串长度不大，分割拼接法已经足够使用，如果需要处理大量数据或者追求更高的性能，正则替换法是更好的选择。