Angular中json pipe无法正确显示regex正则数据该怎么解决

问题原因 #

JSON 标准本身不支持正则表达式类型，Angular 内置的 JsonPipe 底层调用原生 JSON.stringify() 实现数据序列化，而 JSON.stringify() 处理正则对象时会默认返回空对象 {}，因此正则部分的内容无法正常展示。

解决方案 #

方案一：自定义支持正则的序列化 Pipe（推荐复用） #

1. 新建自定义 Pipe 文件，代码如下：

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

@Pipe({
  name: 'jsonWithRegex'
})
export class JsonWithRegexPipe implements PipeTransform {
  transform(value: unknown, indent: number = 2): string {
    return JSON.stringify(value, (_, val) => {
      // 单独匹配正则类型，转为字符串输出
      if (val instanceof RegExp) {
        return val.toString();
      }
      return val;
    }, indent);
  }
}

2. 将该 Pipe 加入你业务模块的 declarations 配置数组中完成注册。
3. 模板中替换原有 json Pipe 即可：

<pre>{{pattern | jsonWithRegex}}</pre>

方案二：组件内直接写转换方法（无需单独新建Pipe） #

在对应组件的类中新增转换方法：

stringifyIncludeRegex(data: unknown, indent: number = 2): string {
  return JSON.stringify(data, (_, val) => val instanceof RegExp ? val.toString() : val, indent);
}

模板中直接调用该方法：

<pre>{{stringifyIncludeRegex(pattern)}}</pre>

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