javascript - 如何使用 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

您将两个正则表达式组合起来。最终正则表达式

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

为了在每个模板中重用它，您可以创建一个常量文件并将该变量保存在那里。然后只需将其导入到您想要使用它的地方即可。那里不需要管道。

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

您还可以在此文件中定义其他正则表达式，并在应用程序中的任何地方重复使用它。

import {regexConstants} from 'path/to/regexConstants';

re = regexConstants.videoUrlsRegexConstant;

html:

<mat-form-field>
<input
matInput
type="url"
name="videoUrl"
ngModel
#videoUrl="ngModel"
placeholder="Url of video"
i18n-placeholder
pattern="{{re}}"
required
/>