ユーザーがURLをテキストボックスに入力するのをブロックする方法

Question

私は角度2を使用しています。ユーザーがテキストボックスにURLとリンクを入力しないように制限します。 これに正規表現を使用できますか？

Answer 1

ディレクティブを使用して、テキストボックスの入力を監視できます。このディレクティブは、正規表現を使用して、現在の入力がURLかどうかを調べることができます。ここでは例

import { Directive, HostListener, ElementRef } from '@angular/core'; 

@Directive({ 
    selector: '[appUrlBlocker]' 
}) 
export class UrlBlockerDirective { 
    constructor(private el: ElementRef) {} 

    expression = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi; 
    regex = new RegExp(this.expression); 

    @HostListener('keyup') check() { 
    if (this.el.nativeElement.value.match(this.regex)) { 
     alert('You have entered a URL!'); 
     // Remove entered content 
     this.el.nativeElement.value = ''; 
    } else { 
     console.log('Does not match'); 
    } 
    } 
} 

だとそのように

<input appUrlBlocker type="text" placeholder="No URLs allowed" /> 

Working demo