Как можно объединить два регулярных выражения в одном шаблоне с Pipe в Angular 8? - PullRequest
Новая
       53

Как можно объединить два регулярных выражения в одном шаблоне с Pipe в Angular 8?

0 голосов
/ 30 апреля 2020

У меня есть приложение angular 8, и я хочу проверить правильность URL-адреса YouTube и URL-адреса Vimeo с шаблоном. Или труба?

Итак, у меня есть это: 


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

}

1 Ответ

1 голос
/ 30 апреля 2020

Вы объединяете два регулярных выражения. Заключительное регулярное выражение 

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