Angular中使用Split方法拆分逗号分隔数组时如何去除逗号后空格

我有一个逗号分隔的字符串值，目前使用split()方法将其转换为数组，但部分场景下如果用户在逗号后输入空格，拆分得到的数组元素会带有多余前置空格。
以下为相关实现代码与运行效果，需要实现去除逗号后跟随的多余空格的效果。

现有实现代码 #

HTML 部分 #

<form [formGroup]="myForm">
  <input type="text" class="form-control" formControlName="title">
  <button (click)="addTitle(myForm.value)">Save</button>
</form>

TypeScript 部分 #

public title = " ";

public myForm: FormGroup = new FormGroup({
  title: new FormControl('', Validators.required)
});

addTitle(value: any){
  this.title = value.title;
  const array = this.title.split(',');
  console.log('array',array);
}

根据不同的业务需求，可以选择两种实现方案：

• 方案1：拆分后统一去除每个元素的首尾空白，适合需要清理所有元素首尾误输入空格的场景
  将原有拆分逻辑替换为以下代码即可：

  const array = this.title.split(',').map(item => item.trim());
  

  *trim()会自动清除字符串首尾的所有空白字符，无论逗号前后存在多少个空格，都能完全清理干净。
• 方案2：通过正则匹配分隔符拆分，适合仅需要处理逗号后跟随空格、需要保留元素自身首尾空格的场景
  代码如下：

  const array = this.title.split(/,\s*/);
  

  该正则规则会将「逗号+逗号后0到多个空白字符」作为整体分隔符，拆分时直接切掉这部分内容，不会在元素前残留多余空格。

补充说明：如果输入字符串首尾存在多余逗号，以上两种方法拆分后可能产生空字符串元素，可以额外加.filter(Boolean)过滤掉空值，例：const array = this.title.split(',').map(item => item.trim()).filter(Boolean);

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