JS实现字符串掩码格式化时如何保留空格且去除末尾占位0

需求为格式化输入值，让输出结果保留掩码maskValue的带空格分隔格式，同时剔除末尾多余的占位0，相关示例参数如下：

• 初始掩码值："0 0000 0000 0000"
• 原始无格式输入值rawValue："251551220"
• 输入过程中动态更新的maskValue："2 5155 1220 0000"
• 期望输出newValue："2 5155 1220"
• 现有代码错误输出："2 5155 1220 0000"，自动补全了末尾多余的占位0

原有错误实现代码如下：

const formattedValue = (maskValue.split('').filter(
  val => val === ' ' || rawValue.split('').includes(val)
))
  .join('');

原有逻辑仅判断字符是否为空格、是否在rawValue中存在，没有做字符顺序和长度匹配：末尾占位的0本身是数字，且rawValue中也包含0，因此占位0会被判定为有效字符保留，导致多余内容残留。

采用逐位顺序匹配的逻辑：遍历掩码字符串，按顺序匹配原始输入的每一位字符，遇到空格则直接保留格式，遇到和当前原始输入位一致的数字则加入结果、匹配指针后移，当原始输入的所有字符都匹配完成后，直接截断后续所有掩码占位内容，避免多余占位符残留。

function formatWithMask(maskValue, rawValue) {
  const resultChars = [];
  let rawPointer = 0;
  const totalRawLen = rawValue.length;

  for (const currentChar of maskValue) {
    // 原始值所有字符已匹配完成，直接终止遍历，丢弃后续占位内容
    if (rawPointer >= totalRawLen) break;

    // 遇到掩码中的空格，直接保留格式
    if (currentChar === ' ') {
      resultChars.push(currentChar);
      continue;
    }

    // 匹配到当前位的有效输入字符，加入结果，指针后移
    if (currentChar === rawValue[rawPointer]) {
      resultChars.push(currentChar);
      rawPointer++;
    }
  }

  return resultChars.join('');
}

// 测试验证
const updatedMask = "2 5155 1220 0000";
const rawInput = "251551220";
const newValue = formatWithMask(updatedMask, rawInput);
// 输出结果为 "2 5155 1220"，完全符合预期

该实现不会因为原始输入中包含和占位符相同的数字（比如0）就误保留多余内容，同时能完整继承掩码定义的空格分隔格式，适配任意分段规则的掩码场景。

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