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

Question

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

所以我有这个：

<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;
....
....
....
}

您也可以在该文件中定义其他regex，并在应用程序中的任何位置重用它。

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
/>