如何将一个模式中的两个正则表达式与Angular 8中的Pipe结合在一起？

Question

我有angular 8应用程序，我想验证带有模式的正确youtube url和vimeo url。还是管道？

所以我有这个：

        <ng-container *ngIf="is('VideoDisplay')">
          <iframe
            *ngIf="videoUrl.value"
            class="video-iframe"
            type="text/html"
            [src]="getVideoSafeUrl(videoUrl.value)"
            frameborder="0"
            allowfullscreen
          ></iframe>
          <mat-form-field>
            <input
              matInput
              type="url"
              name="videoUrl"
              ngModel
              #videoUrl="ngModel"
              placeholder="Url of video"
              i18n-placeholder
              pattern="^(http(s)?:\/\/)?((w){3}.)?youtu(be|.be)?(\.com)?\/.+"
              required
            />
            <mat-error>
               <app-element-edit-field-error
                [errors]="videoUrl.errors"
              ></app-element-edit-field-error>
            </mat-error>
          </mat-form-field>
        </ng-container>

但这仅适用于youtube。但我也想将其与Vimeo电影结合。所以我对vimeo有这个正则表达式：

 var re = /\/\/(?:www\.)?vimeo.com\/([0-9a-z\-_]+)/i;

但是现在如何将这两个结合起来？并与管道一起使用？这样您就可以在每个模板中使用它了？

谢谢

所以我创建了这样的管道：

export class VideoUrlPipe implements PipeTransform {

  transform(value: any, args?: any): any {

    const vimeoReg = new RegExp(/\/\/(?:www\.)?vimeo.com\/([0-9a-z\-_]+)/i);
    const youtubeReg =  ^(http(s)?:\/\/)?((w){3}.)?youtu(be|.be)?(\.com)?\/.+;
    return null;
  }

}

我现在有这样的人：

export class RegexConstants {

  static readonly videoUrlsRegexConstant =
  /((http(s)?:\/\/)?((w){3}.)?youtu(be|.be)?(\.com)?\/.+)|(\/\/(?:www\.)?vimeo.com\/([0-9a-z\-_]+))/g;

}

Answer 1

您将两个正则表达式结合在一起。最终正则表达式