为何首尾元素id值错误？字符串转数组对象问题排查

问题背景 #

原始字符串格式：

_/_-- Select a Sub-server (optional) --_|_509_,Subserver 509_|_510_,Subserver 510_|_511_Subserver 511

期望转换为数组对象：

const arr = [
    { id: "", text: "-- Select a Sub-server (optional) --"},
    { id: "509", text: "Subserver 509"},
    { id: "510", text: "Subserver 510"},
    { id: "511", text: "Subserver 511"},
]

现有代码输出不符合预期：

const values = "_/_-- Select a Sub-server (optional) --_|_509_,Subserver 509_|_510_,Subserver 510_|_511_Subserver 511";
const parts = values.split("_|_").filter(part => part.trim() !== "");
const arr = parts.map(part => {
    const [id, text] = part.split("_,");
    return { id: id || "", text: text || "" };
});

实际输出：

console.log(arr);
[
  { id: '_/_-- Select a Sub-server (optional) --', text: '' },
  { id: '509', text: 'Subserver 509' },
  { id: '510', text: 'Subserver 510' },
  { id: '511_Subserver 511', text: '' }
]

问题原因分析 #

• 第一个元素异常：原始字符串开头的_/_是多余前缀，拆分_|_后第一个片段保留了该前缀，且这个片段里没有_,分隔符，导致text为空，id错误包含前缀内容。
• 最后一个元素异常：最后一个条目使用的分隔符是_而非_,，用_,拆分时无法分割字符串，导致整个内容被当成id，text为空。

优化方案 #

方案一：修复现有逻辑，适配特殊情况 #

const values = "_/_-- Select a Sub-server (optional) --_|_509_,Subserver 509_|_510_,Subserver 510_|_511_Subserver 511";
// 先移除开头的多余前缀
const cleanedValues = values.replace(/^_\/_/, '');
const parts = cleanedValues.split("_|_").filter(part => part.trim() !== "");

const arr = parts.map(part => {
    let [id, text] = part.split("_,");
    // 若按_,拆分失败，尝试按_只拆分一次
    if (!text) {
        [id, text] = part.split("_", 2);
    }
    // 处理默认选项的id为空的情况
    if (id.startsWith("-- Select")) {
        return { id: "", text: id };
    }
    return { id: id.trim(), text: text.trim() };
});

console.log(arr);

方案二：用正则匹配更精准 #

直接通过正则提取所有符合规则的条目，逻辑更简洁可靠：

const values = "_/_-- Select a Sub-server (optional) --_|_509_,Subserver 509_|_510_,Subserver 510_|_511_Subserver 511";
const arr = [];

// 提取默认选项
const defaultText = values.match(/^_\/_(.*?)_|\|_/)[1].trim();
arr.push({ id: "", text: defaultText });

// 匹配所有带id的条目（兼容_,和_两种分隔符）
const itemRegex = /_(\d+)[_,](.*?)(?=_|\|_|$)/g;
let match;
while ((match = itemRegex.exec(values)) !== null) {
    arr.push({ id: match[1].trim(), text: match[2].trim() });
}

console.log(arr);

两种方案均可输出符合预期的结果。

内容的提问来源于stack exchange，提问作者ReynierPM