Angular项目中如何实现字母数字字符串按指定模式格式化

核心逻辑为遍历格式化掩码，遇到占位符时取原始字符串的下一个字符拼接，遇到分隔符时直接拼接，可兼容任意自定义分隔符、占位符规则。

通用TypeScript工具函数实现 #

/**
 * 按指定掩码格式化字符串
 * @param input 原始输入字符串
 * @param mask 格式化掩码，默认用*作为占位符
 * @param placeholder 自定义占位符，默认值为*
 */
function format(input: string, mask: string, placeholder: string = '*'): string {
  let inputIndex = 0;
  let result = '';

  for (const maskChar of mask) {
    // 原始字符串遍历完成后终止循环
    if (inputIndex >= input.length) break;

    if (maskChar === placeholder) {
      // 占位符位置取原始字符串对应字符
      result += input[inputIndex];
      inputIndex++;
    } else {
      // 非占位符直接拼接分隔符
      result += maskChar;
    }
  }

  // 若原始字符串长度超过占位符数量，可选追加剩余字符，不需要可删除下一行
  result += input.slice(inputIndex);

  return result;
}

调用示例 #

const specimenNumber = '19S20010';
console.log(format(specimenNumber, "***-****-*")); 
// 输出结果：19S-2001-0，完全符合预期

Angular项目适配方案 #

Angular场景下推荐封装为纯管道，可直接在模板中使用：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'maskFormat',
  pure: true
})
export class MaskFormatPipe implements PipeTransform {
  transform(
    input: string | null | undefined,
    mask: string,
    placeholder: string = '*'
  ): string {
    if (!input) return '';
    let inputIndex = 0;
    let result = '';

    for (const maskChar of mask) {
      if (inputIndex >= input.length) break;
      result += maskChar === placeholder ? input[inputIndex++] : maskChar;
    }

    // 剩余字符追加逻辑按需保留
    result += input.slice(inputIndex);
    return result;
  }
}

管道使用步骤 #

1. 在对应模块的declarations数组中注册MaskFormatPipe
2. 模板中直接调用：

<span>{{ specimenNumber | maskFormat: '***-****-*' }}</span>

自定义规则说明 #

如果掩码使用其他字符作为占位符，比如#，只需传第三个参数即可：

format(specimenNumber, "###-####-#", "#") // 输出同样为19S-2001-0

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