Wyrażenia Regularne (regular expressions/regex) oraz HTML Pattern

Jak działają wyrażenia regularne? Sam się nad tym przez pewien czas zastanawiałem. W pracy zawodowej musiałem czasem z nich korzystać, ale zbytnio nie przywiązałem do nich uwagi, bo głównie polegało to na znalezieniu pasującego przykładu z internetu.

Ze względu na to, że potrzebowałem odpoczynku od głównego projektu to postanowiłem na szybko napisać w PHP ten mały web-programik do tworzenia palety kolorów w PHP.

Znajdziecie go pod tym adresem: http://www.noob-programmer.com/kolor/

Ale co to ma wspólnego z Regexami?

Moim problemem był fakt, że chciałem aby pole akceptowało jedynie adresy url, oraz wybrane formaty plików. Czyli nie chciałem aby adres pliku kończył się na przykład z rozszerzeniem typu .doc

Można stworzyć w ten sposób przy pomocy regexów wyjątek, który będzie akceptował jedynie wybrane formaty plików.

Linijka kodu na którą powinniście zwrócić uwagę:

<input type="url" name="image" pattern="(https?:\/\/.*\.(?:png|jpeg|jpg|gif))">

W przykładzie powyżej został stworzony regex akceptujący jedynie formaty pod postacią obrazów czyli .jpg, .jpeg, gif oraz png. Dodatkowo musi być to adres url zaczynający się od przedrostka http, bądź https.

W ten sposób tworzymy “ograniczenie” wprowadzanych danych.

HTML pattern pozwala wam wprowadzić w pole wyrażenie regex. Choć nie jest to konieczne. Bo można stworzyć pattern : “wzór” w inny sposób.

Przykład powyżej prezentuje sposób w jaki sposób ograniczyć pola jedynie do kodów pocztowych. Czyli jest to 6 znaków (5 cyfr i jeden znak specjalny) oraz zablokowanie możliwości wprowadzania liter. Również kolejność cyfry musi się zgadzać. Czyli dwa pierwsze pola muszą być to pola liczbowe, myślnik oraz kolejne  muszą być to 3 pola liczbowe.

Z innych przykładów wzorów (patternów):

Adres e-mail:

E-mail: <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
<input type="submit">

Wprowadzanie hasła:

Hasło: <input type="password" name="pw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Musi posiadac przynamniej jedna liczbę, jedną dużą i jedną małą literę, oraz musi mieć więcej niż 8 znaków">

Więcej przykładów w języku angielskim znajdziecie tutaj: http://html5pattern.com/

A jak chcecie sprawdzić, czy zgadza się wasze wyrażenie regularne to możecie sprawdzić go tutaj:

https://regex101.com/

2 thoughts to “Wyrażenia Regularne (regular expressions/regex) oraz HTML Pattern”

Leave a Reply

Your email address will not be published. Required fields are marked *