如何在 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
/>

如何在 Angular 8 中使用 Pipe 将两个正则表达式组合成一个模式？

How can you combine two regular expressions in one pattern with Pipe in Angular 8?

javascript

regex

typescript

angular-pipe

angular