Angular2/4中TitleCasePipe处理撇号异常的解决方案求助

我之前也碰到过一模一样的坑！Angular自带的TitleCasePipe在处理包含撇号的字符串时，确实会把撇号后面的第一个字母强制大写，就像你遇到的"tim's request"被转成"Tim'S Request"，完全不符合我们想要的标题格式。

问题根源 #

原生TitleCasePipe的核心逻辑是：把所有非字母字符之后的第一个字母都转为大写。撇号'属于非字母字符，所以它后面的s就被自动大写了，这显然不是我们要的效果。

最实用的解决方案：自定义符合需求的标题格式管道 #

最稳妥的方式是自己写一个自定义管道，精准控制首字母大写的触发条件——比如只在空格（或你需要的其他分隔符）之后才大写首字母，同时保留撇号后的小写字母。

下面是具体的实现步骤：

1. 用Angular CLI快速生成管道文件：

ng generate pipe custom-title-case

2. 在custom-title-case.pipe.ts里实现自定义逻辑：

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

@Pipe({
  name: 'customTitleCase'
})
export class CustomTitleCasePipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return '';
    
    // 先把整个字符串统一转小写
    const lowercasedStr = value.toLowerCase();
    // 只匹配字符串开头或空格后的第一个字母，将其转为大写
    return lowercasedStr.replace(/(^|\s)\w/g, match => match.toUpperCase());
  }
}

3. 在组件模板里直接使用：

{{ "tim's request" | customTitleCase }}

这样就能得到完美的"Tim's Request"啦！

进阶优化（可选） #

如果你的业务场景里还有其他需要特殊处理的分隔符（比如连字符-），可以调整正则表达式。比如要让连字符后的首字母也大写，但撇号后的保持小写，只需修改正则：

return lowercasedStr.replace(/(^|\s|-)\w/g, match => match.toUpperCase());

另外，如果你不想完全重写，也可以在原生管道的基础上做修正：

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

@Pipe({
  name: 'fixedTitleCase'
})
export class FixedTitleCasePipe implements PipeTransform {
  constructor(private titleCasePipe: TitleCasePipe) {}
  
  transform(value: string): string {
    if (!value) return '';
    // 先用原生管道转换，再把撇号后的大写字母转回小写
    const rawResult = this.titleCasePipe.transform(value);
    return rawResult.replace(/(')([A-Z])/g, (_, p1, p2) => p1 + p2.toLowerCase());
  }
}

这种方式适合只需要修正撇号这一种特殊情况的场景。

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