m1chu.eu - another devblog » Ogólne

CodeTwister (#2) – nadszedł czas prostych zagadek programistycznych!

m1chu — Fri, 10 Sep 2010 09:57:02 +0000

Po niespełna dwóch latach pora na kontynuację zabawy. Tym razem poziom wyżej i mieszanka: jedno zadanie dotyczące języka kompilowanego, a drugie skryptowego. A przed tym, rozwiązanie poprzedniej zagadki…

CodeTwister (#1) – rozwiązanie

W listopadzie 2008 roku zamieściłem prosty quiz dotyczący kodu XHTML, CSS i JavaScript. Rozwiązanie opierało się na poprawieniu czterech błędów:

W przypadku użycia negatywnego komentarza warunkowego strona przestaje być prawidłowym dokumentem XHTML. Tym bardziej wewnątrz arkusza stylów. Style przeznaczone dla Internet Explorera powinny więc być umieszczone w ukrytych komentarzach warunkowych lub za pomocą odpowiednich haków.
```
div#container p {
    color: #ccc;
}
```
Znacznik comment nie jest elementem XHTML.
```
Nie używasz
```
Nie można w poniższy sposób dodać elementu z zawartością do jakiegokolwiek potomka body ponieważ kod JavaScript wykonywany jest przed załadowaniem dokumentu XHTML. W celu rozwiązania problemu można wykorzystać m.in. możliwości frameworków, elementu onload albo zdarzeń DOMContentLoaded lub window.onload.
Brak wymaganego znacznika title.

Najbliżej rozwiązania był więc gruch4. Gratulacje!

A w nowym pakiecie…

Zadanie 1 w PHP: problem ze zwracanym wynikiem

Wykonujemy poniższy kod PHP:

$zmienna_poczatkowa = 10;
$zmienna_wynikowa = ((~$zmienna_poczatkowa)^(1+8)) << 2;
var_dump($zmienna_poczatkowa, $zmienna_wynikowa);

Dlaczego poniższy kod w wyniku zwraca wartość ujemną (int(10) int(-16))? Jak powinna wygląda poprawnie skonstruowana składnia? Jaki będzie wtedy wynik?

Zadanie 2 w C/C++: błędny kod

Znajdź błędy w poniższym kodzie C/C++. Czego w nim brakuje?

#include 
#include  

#define SIZE 200 

int main()
{
    int *m = malloc(SIZE*sizeof(int)), i;
    char small = 'x', large = 'y';

    for (i = 0; i < SIZE; ++i) {
        if ( !(i % 2) )
            printf("%s: %d\n", small, (*(m + i) = i * i));
        else
            printf("%s: %d\n", large, (*(m + i) = i * i));
    }

    free(m);

    return 0;
}

Życzę wszystkim powodzenia! :]

Szybka porada: jak zmusić Internet Explorer 8 i Firefox 2 do obsługi HTML 5? (#1)

m1chu — Tue, 24 Aug 2010 20:38:47 +0000

Sieć została ogarnięta szałem najnowszej, piątej wersji języka HTML. Jak to zazwyczaj bywa słabo z jej obsługą radzi sobie Internet Explorer. We wszystkich wydanych wersjach pojawia się problem z parsowaniem elementów języka HTML 5, a co za tym idzie nie ma domyślnie możliwości ich poprawnego ostylowania. Podobny problem w przeszłości występował w Firefoksie 2.

Zarys problemu

Załóżmy więc, że tworzymy nowy projekt i jesteśmy na etapie dodawania nagłówka oraz stopki dokumentu.




    
    Obsługa HTML 5 z CSS
    


    Nagłówek
    Stopka

Nadaliśmy powyżej kilka atrybutów stylów pozycjonujących elementy oraz nadających im odpowiedni wygląd. Po przetestowaniu w Internet Explorerze i alternatywnych przeglądarkach zobaczymy jednak różne wyniki.

Wynik w Firefoksie 4.

Wynik w Internet Explorerze 8.

Internet Explorer – rozwiązanie pierwsze

Aby pozbyć się tego problemu należy do sekcji head wstawić:

Internet Explorer – rozwiązanie drugie

Dla każdej wersji Internet Explorera można także dodać do dokumentu HTML (w sekcję head) zewnętrzny kod JavaScript, dzięki któremu osiągniemy wyżej opisany skutek.

Firefox 2

Niespełna jeden procent internautów nadal używa drugiej odsłony popularnego lisa. Zarówno on, jak i wszystkie przeglądarki oparte na silniku Gecko pre 1.9b5 (np. Camino 1.x) posiadają błąd parsowania dzięki któremu w przypadku otwarcia nowego znacznika każdy nieznany, wcześniej otwarty zostanie automatycznie zamknięty.

Rozważmy więc przykładowy kod.


    Nagłówek
    
        Stopka

Przeglądarki oparte na omawianej wersji silnika Gecko przeparsują go w następujący sposób:

Nagłówek

Stopka

Aby rozpocząć modyfikacje należy wykonać dwie rzeczy:

Wykonać przekierowanie przykładowo za pomocą mod_rewrite lub PHP tak, aby Firefox 2 uważał analizowany dokument jako XHTML

RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{HTTP_USER_AGENT} rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko
RewriteRule .* - [T=application/xhtml+xml]

if (preg_match('/rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko/', $_SERVER['HTTP_USER_AGENT'])) {
  header('Content-type: application/xhtml+xml');
}

Dodać atrybut xmlns do znacznika html

W tym wypadku należy jednak pamiętać o tym, że XML jest wrażliwy na encje HTML-owe. Przykładowo więc używanie ⋅ należy zaniechać na rzecz ⋅.

Następnym razem dowiecie się…

jak stworzyć wielokolumnową treść w CSS3?

Natchnienia warte uwagi – przegląd startupów #1 – maj 2010

m1chu — Mon, 31 May 2010 21:36:35 +0000

Kolejna część natchnień wartych uwagi, a pierwsza dotycząca przeglądu tegorocznych startupów. Poniżej przedstawiam 21 ciekawych i godnych uwagi pozycji…

Śledzi osoby surfujące po stronie internetowej.

Społecznościowy menedżer zadań.

Telewizyjna przeglądarka internetowa.

Video-chat z losowymi użytkownikami.

Aplikacja do zarządzania projektami.

Organizator skrzynek e-mail.

Serwis oferujący skrypt Twitteropodobny.

Pozwala na stworzenie aplikacji mobilnej.

Umożliwia znalezienie najlepszych miejsc do pracy w delegacji.

Internetowy kalendarz z możliwością współdzielenia jego pól.

Kreator wirtualnej szkoły.

Piłka nożna na żywo.

Usługa badająca aktywność użytkownika i na jej podstawie dobierająca odpowiednią dla niego treść.

Sprzedaż i kupno biznesu.

Usługa, podobnie jak powyższa, pozwala na kupno i sprzedaż serwisów internetowych.

Platforma dyskusji na temat ulubionych programów telewizyjnych.

Aplikacja monitorująca stan komputera.

Serwis oferujący ulubione fragmenty filmowe.

Silnik wyszukiwarki dla sklepów internetowych.

Platforma grupowych zakupów.

Nauka o reklamach w formie zabawy.

HTML 5: obsługa elementów AUDIO i VIDEO

m1chu — Fri, 19 Mar 2010 21:14:33 +0000

Serwisów oferujących przeglądanie zasobów multimedialnych nie brakuje w sieci. Do niedawna jednak wszystkie oparte były o wykorzystanie możliwości znaczników object lub niepoprawnego embed. Problem w tym, że rozwiązania te opierały się o wtyczki firm trzecich, takie jak QuickTime, czy Flash. HTML 5 standaryzuje osadzanie plików muzycznych i filmów.

Kwestia dźwiękowa: element AUDIO

Jedna z najbardziej, od dawna oczekiwanych możliwości w HTML 5. Pozwala na natywne odtwarzanie utworów muzycznych w przeglądarce. Określana znacznikiem audio.

Wg. specyfikacji może przyjmować pięć atrybutów:

autoplay – określa czy odtwarzać automatycznie dźwięk, gdy zostanie on załadowany,
controls – określa czy wyświetlić odtwarzacz w standardowym układzie,
loop – określa czy powtarzać odtwarzanie,
preload – wyznacza, czy załadować zasobów w trakcie ładowania strony,
src – adres URL do pierwotnego, ładowanego źródła.

Korzystając z powyższych informacji możemy otrzymać następujący przykład:

W praktyce pojawi się jednak problem, związany z implementacją różnych wersji kodeków w przeglądarkach (np. Vorbis, Advanced Audio Coding, MPEG-1 Audio Layer 3). Z tego powodu, trzeba aktualnie definiować dodatkowe zasoby w tagu source. Obsługuje on atrybuty:

media – zdefiniowanie typu zasobu. Domyślnie odpowiada wszystkim typom mediów,
src – adres URL do pierwotnego, ładowanego źródła,
type – definiuje typ zasobu, pozwalając na określenie przeglądarce, czy może odtworzyć go, bez konieczności pobierania. Musi być pod postacią prawidłowego typu MIME. Opcjonalnie, wewnątrz niego można zdefiniować parametr codecs, określający jak zakodowany jest zasób.

Na wypadek niekompatybilnej przeglądarki można wewnątrz elementu audio wstawić alternatywną wiadomość, bądź plik Flash z autorskim odtwarzaczem.



	
	
	
	
	
	
	
	Twoja przeglądarka nie obsługuje HTML 5.

W rozwiązaniu powyższego problemu pomóc może także użycie możliwości JavaScriptu i metod/atrybutów/zdarzeń dostępnych w API. Pozwalają one na manipulację na obsługiwanych plikach. Niestety skorzystanie z możliwości obiektu Audio nie będzie możliwe w jakiejkolwiek wersji IE.

buffered – określa ilość oraz początkowy i końcowy czas zbuforowanego zasobu,
canPlayType(typ_MIME) – zwraca informacje na temat tego, czy dany typ obsługiwany jest przez klienta. Możliwe wyniki to: no, maybe, probably,
currentTime – pozwala na ustawienie lub pobranie aktualnego czasu odtwarzania,
duration – wyświetla czas trwania utworu. W wypadku nie załadowania go, zwraca NaN (Not a Number),
ended – zwraca prawdę, jeżeli zakończono odtwarzanie (w przód),
loop – wartość logiczna, pozwalająca na zapętlanie dźwięku,
muted – zwraca lub ustawia, czy kanały audio są wyciszone,
pause() – pauzuje odtwarzanie,
paused – przetrzymuje informacje o tym, czy element jest spauzowany,
play() – wznawia odtwarzanie,
played – przetrzymuje informacje o odtwarzanym elemencie,
volume – zwraca lub ustawia głośność dźwięku w zakresie od 0.0…0.1.

Przykład:

Przykład z użyciem new Audio():

var obj = new Audio('');
alert(!!(obj.canPlayType));

Kwestia filmowa: element VIDEO

Drugi, ważny element HTML 5. Oparty o znacznik video. Przyjmuje te same atrybuty co audio, a ponadto:

height – określa wysokość okna playera,
poster – adres URL alternatywnej grafiki, wyświetlanej jeżeli domyślny zasób nie będzie dostępny,
width – określa szerokość okna odtwarzacza.

Tak oto możemy stworzyć podstawowy przykład użycia:

Ponownie, w praktyce, powinno się zdefiniować kilka, różnych źródeł plików, w celu obsługi odtwarzacza przez większą ilość przeglądarek.



	
	
	
	
	
	
	
	Twoja przeglądarka nie obsługuje HTML 5.

W odtwarzaczu wyświetlane są dwa filmy (Elephants Dream, Big Buck Bunny) na licencji zezwalającej na rozprowadzanie kopii w trybie online.

Obróbka

Zarówno w przypadku jednego, jak i drugiego elementu możemy je stylować.

audio, video {
	width: 480px;
	height: 320px;
}

Kompatybilność

Kodek (kontener)	Android	Chrome >= 3.0	Firefox >= 3.5	Iphone	Opera >= 10.5	Safari >= 4
Theora video (Ogg/.ogv)	x	✓	✓	x	✓	x
Vorbis audio (Ogg/.ogg)	x	✓	✓	x	✓	x
H.264 video (MP4/.mp4)	✓	✓	x	✓	x	✓
AAC audio (MP4/.mp3)	✓	✓	x	✓	x	✓
WAV audio (WAV/.wav)	-	-	✓	-	✓	✓

Wzorzec projektowania wtyczek jQuery na bazie metod i funkcji

m1chu — Sat, 06 Mar 2010 18:17:32 +0000

Praca z jQuery prędzej, czy później wymusza na nas kompleksowe tworzenie rozwiązań wykonywanych po stronie użytkownika. Metody filtrujące, animacje, czy efekty na galeriach zdjęć łatwiej będzie osiągnąć i rozwijać posługując się, łączącymi się na wtyczki, mechanizmami metod i funkcji, dostępnymi w frameworku.

Metoda, a funkcja?

Podstawowa różnica pomiędzy nimi polega na tym, że operują na innych obiektach. Każda nowa metoda musi być dołączona do prototypu jQuery.fn, a funkcja po prostu do obiektu jQuery.

/* metoda */
jQuery.fn.nazwa = function() {
	[...]
};

/* funkcja */
jQuery.nazwa = function() {
	[...]
};

W praktyce powoduje to, że do metody odwołujemy się operując na jakimś elemencie, identyfikatorze, bądź na klasie znajdującej się na stronie internetowej, a w przypadku funkcji, po prostu ją wywołujemy w celu wykonania jakieś akcji.

/* wywołanie: metoda */
$(element).nazwa();

/* wywołanie: funkcja */
var x = $.nazwa();
alert(x);

Obydwie możemy parametryzować. Argumentem może być zwykła zmienna, dowolnego, obsługiwanego przez JavaScript typu lub obiekt przechowujący zbiór pól o konkretnym przeznaczeniu.

/* metoda z parametrem */
jQuery.fn.nazwa = function(options) {
	[...]
};

/* funkcja z parametrem */
jQuery.nazwa = function(options) {
	[...]
};

Umowne zasady tworzenia pluginów

Twórcy jQuery, poprzez dokumentację, podpowiadają jakimi zasadami należy się kierować, aby poprawnie tworzyć wtyczki. Mianowicie:

Terminologie funkcja, metoda, czy klasa są stosowanie umownie, z racji specyfiki przeznaczenia każdego z tych elementów. Fraza metoda jest w powyższym wypadku synonimem całego pojęcia wtyczki.
Nazwy plików powinny być formowane następująco: jquery.[nazwa_wtyczki].js. Przykładowo: jquery.nazwa.js.
W metodach this jest referencją do aktualnie przetwarzanego obiektu jQuery.
Powinno się dołączać wtyczkę do obiektu nadrzędnego poprzez jQuery, a nie $, co użytkownikom zwiększa pole manewru we wprowadzaniu zmian z użyciem jQuery.noConflict().
W celu uniknięcia problemów z poprawnością kodu po jego wcześniejszej kompresji, wszelkie metody oraz funkcje powinny kończyć się znakiem średnika (;).
Użycie .each pozwala na bezproblemową iteracje po wszystkich elementach na których operujemy w metodzie.
Metoda domyślnie musi zwracać wartość.

.each(function(indeks, element)) – przenosi się po każdym elemencie drzewa DOM, będących częścią obiektu jQuery, za każdym razem wykonując funkcję określoną jako parametr opisywanej metody.

Przykład:


	play
	the
	game

$('ol').each(function(i, e) {
	// e == this
	// e jest warte użycia w konkretnych zagnieżdżeniach, kiedy to this nie zawsze wskazuje na aktualnie analizowany element pętli
	$(e).html('' + $(this).text() + '');
});

Przekazywanie parametrów w celu kontrolowania zachowań wtyczki

Czym byłby plugin bez możliwości prostej parametryzacji określonych zachowań? W celu ułatwienia zrozumienia ich tworzenia postaramy się stworzyć bardzo prosty tester poprawności wpisywanych do pola danych (np. o identyfikatorze #nick). Sprawdzimy w nich, czy wprowadzony tekst będzie odpowiadał odpowiedniemu wzorcowi wyrażenia regularnego i będzie wystarczająco długi. Ponadto określimy do jakiego elementu zwrócić informację na wypadek niespełnienia wcześniej wymienionych kryteriów. Warto więc będzie zdefiniować na stałe wartości tych opcji oraz dać przyszłym jej użytkownikom możliwość nadpisania ich w argumentach wywoływanej metody.

jQuery.extend([ tryb_rekursywny ,] obiekt_rozszerzany, obiekt_1_rozszerzający [, ... obiekt_n_rozszerzający]) – łączenie dwóch lub kilku właściwości obiektów do osobnego.

tryb_rekursywny – przyjmuje wartości logiczne (true/false) w celu wykonania rekursywnego łączenia,
obiekt_rozszerzany – element nadpisywany (w celu uniknięcia należy pozostawić puste),
obiekt_x_rozszerzający – elementy łączone.

Załóżmy więc, że nazwiemy naszą wtyczkę filtrate, a domyślne dane będziemy przetrzymywać w obiekcie defaults.

jQuery.fn.filtrate = function() {
	var defaults = {
		length:		6, // minimalna długość wprowadzanego tekstu
		regexp:		/[0-9a-z]/gi, // kryterium wprowadzanych znaków
		returnto:	'footer' // informacja o błędzie zostanie zwrócona do tego elementu
	};

	alert(defaults.regexp); // przykładowe użycie
};

Za pomocą parametru options przekażemy spersonalizowane dane konfiguracyjne.

jQuery.fn.filtrate = function(options) {
	var defaults = {
			length:		6, // minimalna długość wprowadzanego tekstu
			regexp:		/[0-9a-z]/gi, // kryterium wprowadzanych znaków
			returnto:	'footer' // informacja o błędzie zostanie zwrócona do tego elementu
	}; 

	// rozszerzenie domyślnej konfiguracji
	var options = $.extend(defaults, options);

	alert(options.regexp); // przykładowe użycie
};

Propozycje wywołań metody z użyciem argumentów.

$('#nick').filtrate({length: 3});
// lub
$('#nick').filtrate({
	regexp: /[0-9]/gi,
	length: 3
});

Do ustawień nie ma jednak publicznego dostępu. Możemy co prawda skonfigurować je przy wywoływaniu wtyczki, ale nie bezpośrednio, np. później. W tym celu należy przenieść domyślne wartości do własności składowej metody oraz połączyć wprowadzane i predefiniowane dane bez modyfikacji tych drugich.

jQuery.fn.filtrate = function(options) {
	// rozszerzenie domyślnej konfiguracji bez jej nadpisywania (pierwszy argument pusty)
	var options = $.extend({}, $.fn.filtrate.defaults, options);

	alert(options.regexp); // przykładowe użycie
};

$.fn.filtrate.defaults = {
	length:		6, // minimalna długość wprowadzanego tekstu
	regexp:		/[0-9a-z]/gi, // kryterium wprowadzanych znaków
	returnto:	'footer' // informacja o błędzie zostanie zwrócona do tego elementu
};

Zewnętrzny programista ma teraz szansę wykonania ustawień przed i po wywołaniu wtyczki, a także bez konieczności robienia tego w bloku jQuery(document).ready(function() [...]);.

// nadpisanie długości spoza parametru
$.fn.filtrate.defaults.length = 3;
$('#nick').filtrate({regexp: /[0-9]/gi});

Prywatne funkcje – ukrywamy poszczególne elementy

Nie każda partia kodu powinna być dostępna do bezpośredniego wywołania przez użytkownika wtyczki. Przykładem może być tutaj funkcja użytkowa, stworzona stricte do celów danej metody. Aby tego dokonać, należy opleść całą definicję pluginu w funkcję zamykającą (closure) oraz po za samą metodą użyć standardowej formy tworzenia funkcji w JavaScript. Metodologia tworzenia funkcji w jQuery nie zda tutaj prawidłowego rezultatu. Dostęp będzie nadal publiczny.

(function($) { // start: closure
	$.fn.filtrate = function() {
		$.logs(1); // ostrzeżenie z zawartością '1'

		logs(1); // ostrzeżenie z zawartością '1'
	};		

	function logs($obj) {
    	alert($obj);
  	};

	$.logs = function($obj) {
		alert($obj);
	};
})(jQuery); // end: closure

jQuery(document).ready(function() {
	$('#nick').filtrate();

	$.logs(1); // ostrzeżenie z zawartością '1'
	logs(1); // brak dostępu do tej funkcji z zewnątrz
});

Wywoływanie funkcji oraz innych metod we wtyczce

Zaistnieć może także sytuacja przeciwna do powyższej. Z różnych powodów możemy chcieć skorzystać z publicznie dostępnej metody, zaimplementowanej wewnątrz wtyczki, którą tworzymy lub z funkcji przedstawionych na początku artykułu.

[...]
        
        	Wpisz swój script nick
            Wpisz swój a href nick
        
[...]

Mamy przykładowy zestaw paragrafów, z których będziemy chcieli wykluczyć pewny ciąg znaków. Ponieważ będziemy sprawdzać więcej elementów niż jeden, skorzystamy z wcześniej wymienionej metody iteracyjnej .each(), a następnie pobierzemy ich zawartości, usuniemy stosowną frazę (korzystając z osobnej funkcji/metody) i zwrócimy wynik do znacznika je zawierającego.

jQuery.fn.filtrate = function(options) {
	var defaults = {
		erase:	 	/a href/g, // tekst do usunięcia
		usemethod:	true // pomocnicze, użycie metody lub funkcji
	};
	// rozszerzenie domyślnej konfiguracji
	var options = $.extend(defaults, options);

	return this.each(function() {
		var context = $(this).html(); // pobranie zawartości elementu
		switch (options.usemethod) // dodany w celach naukowych ;]
		{
			case false:
				context = $.cleanup(context, options.erase); // wywołanie funkcji
				break;
			default:
				context = $.fn.filtrate.cleanup(context, options.erase); // wywołanie metody
				break;
		}
		$(this).html(context); // zapisanie zmodyfikowanej zawartości elementu
	});
};		

// metoda zaimplementowana we wtyczce
jQuery.fn.filtrate.cleanup = function(context, erase) {
	return context.replace(erase, ''); // usunięcie frazy z ciągu
};

// osobna funkcja
jQuery.cleanup = function(context, erase) {
	return context.replace(erase, ''); // usunięcie frazy z ciągu
};

jQuery(document).ready(function() {
	// tryb wywoływania z metody
	$('footer p').filtrate({erase: /script/g});

	// tryb wywoływania spoza metody
	return $('footer p').each(function() {
		var context = $(this).html();
		context = $.fn.filtrate.cleanup(context, /a href/g);
		context = $.cleanup(context, /script/g);
		$(this).html(context);
	});
});

Osiągamy postawiony cel

Na podstawie powyższych rad możemy osiągnąć postawiony sobie cel – tester poprawności wpisywanych danych do pola typu input. Rozwiązanie będzie zezwalać na testowanie wielu pól naraz.

[...]
    	
			
			
        
[...]

Wywołanie odbywać się będzie w momencie zwolnienia przycisku klawiatury.

jQuery(document).ready(function() {
	$('input').keyup(function() {
		$('input').filtrate({regexp: /[a-z]/g});
	});
});

W przestrzeni funkcji zawierającej wtyczkę znajdzie się prywatna funkcja logująca akcje oraz dwie publiczne metody implementowane w pluginie. Pierwsza z nich będzie sprawdzać poprawność wpisywanego tekstu pod względem zadanego wzorca, a druga długość wprowadzonego ciągu znaków.

	// metoda testująca poprawność wpisanych znaków
	$.fn.filtrate.preg_match = function(pattern, subject) {
		var subject_splited = subject.split(''); // utworzenie tablicy znaków
		for ( i=0; i < subject_splited.length; ++i ) // iteracja po każdym ze znaków
		{
			// jeżeli którykolwiek znak nie będzie odpowiadał wzorcowi metoda zwraca fałsz
			if ( subject_splited[i].match(new RegExp(pattern)) == null )
			{
				return false;
			}
		}
		return true; // wszystkie znaki są odpowiednie, prawda - jedziemy dalej ;]
	};

	// metoda porównująca długości ciągów
	$.fn.filtrate.strlen_compare = function(string, min_length) {
		var length = string.length;
		if ( length < 1 ) // tekst nie został wpisany
		{
			return false;
		}
		else if ( length < min_length ) // tekst krótszej długości niż wymagana
		{
			return min_length - length;
		}
		return true; // tekst odpowiedniej długości
	};

	// funkcja prywatna, logująca akcje
	function log_alerts(returnto, text)
	{
		// jeżeli nie podano tekstu do wypisania, czyścimy zawartość znacznika przetrzymującego ostrzeżenia i informacje
		if ( text == undefined )
		{
			$(returnto).html('');
			return;
		}

		// dodanie nowego akapitu z zwróconą treścią do podanego znacznika
		$('' + text + '').appendTo(returnto);
	}

Domyślne opcje ustawimy poza wtyczką. W niej samej, dla każdego wskazanego elementu strony, sprawdzimy najpierw warunek długości, a gdy zostanie spełniony, także zawartości.

(function($) { // start: closure
	$.fn.filtrate = function(options) {
		// rozszerzenie domyslnej konfiguracji bez jej nadpisywania (pierwszy argument pusty)
		var options = $.extend({}, $.fn.filtrate.defaults, options);

		var context, strlen_compared_result;

		// czyszczenie znacznika zawierającego informacje o stanie pól
		log_alerts(options.returnto);

		// sprawdzenie każdego elementu
		return this.each(function(i) {
			context = $(this);

			// testowanie długości
			strlen_compared_result = $.fn.filtrate.strlen_compare(context.val(), options.length);
			switch (strlen_compared_result)
			{
				case false: // w wypadku niewpisania tekstu
					// logowanie akcji
					log_alerts(options.returnto, 'Pole ' + context.attr('id') + ' jest puste');
					return true;
					break;
				case true: // w wypadku odpowiedniej długości tekstu
					// puste
					break;
				default: // w wypadku za krótkiego tekstu zwracany jest: tekst + wymagana długość + ilość brakujących znaków
					log_alerts(options.returnto, 'Pole ' + context.attr('id') + ' zawiera za mało znaków (minimum: ' + options.length + ' / brakuje: ' + strlen_compared_result + ')');
					return true;
					break;
			}

			// testowanie typów znaków znajdujących się w tekście
			switch ($.fn.filtrate.preg_match(options.regexp, context.val()))
			{
				case false: // w wypadku pojawienia się niedozwolonych znaków
					log_alerts(options.returnto, 'Pole ' + context.attr('id') + ' zawiera niedozwolone znaki');
					return true;
					break;
				default: // w wypadku poprawnego sformowania tekstu
					log_alerts(options.returnto, 'Pole ' + context.attr('id') + ' jest prawidłowo wypełnione');
					break;
			}
		});
	};

	$.fn.filtrate.defaults = {
		length:	 6, // minimalna dlugosc wprowadzanego tekstu
		regexp:	 /[0-9a-z]/gi, // kryterium wprowadzanych znaków
		returnto:   'footer' // informacja o bledzie zostanie zwrócona do tego elementu
	};

	// pozostałe dwie metody + prywatna funkcja
})(jQuery); // end: closure

Przykład ten powinien przybliżyć kwestię wcześniej poruszone w artykule. Na jego podstawie udostępniłem także testową stronę oraz gotowe pliki do pobrania.

Natchnienia warte uwagi – strony w technologii Flash #1 – listopad 2009

m1chu — Tue, 03 Nov 2009 21:57:17 +0000

Dobrze skonstruowany serwis internetowy bazujących na technologii Flash to nie tylko dużo pracy, ale często także oszałamiający efekt. Zbiór motywujących i wartych uwagi przedstawiam dziś w dalszej części tego wpisu.

Sarasota – v5 Design – pokaz krajobrazu z nastrojowym podkładem dźwiękowym.

Interaktywna podróż po epokach.

Modernistyczna strona web developerów.

Przykład dobrze wyglądającego portfolio graphic designera.

Przykład rozwiązania bazującego na technologii Flash z motywem w postaci użytego tła.

Interaktywność i akcja zależna od ruchu myszki.

Konfiguracja wtyczki FeedSmith w panelu.

Efekt oparty o przenoszenie użytkownika pomiędzy scenami.

Wkomponowanie w strukturę elementy filmowych.

Klasyka tematu.

Portfolio z rodzimego rynku.

Strona polskiej firmy specjalizującej się w wyburzeniach.

Podziękowania dla dzi3ciola za wykonanie grafiki wstępnej.

15 przydatnych wyrażeń regularnych w PHP

m1chu — Tue, 13 Oct 2009 20:23:51 +0000

W pewnym stadium zaawansowania wyrażenia regularne stają się potężnym narzędziem każdego programisty PHP (i nie tylko). A to dlatego, że pozwalają na wykonywanie operacji, których często nie sposób dokonać w prosty sposób przy pomocy standardowych funkcji zawartych w tym języku. Walidacja zawartości zmiennych, czy podmienianie specyficznej części ich zawartości – na to pozwalają wyrażenia regularne. 15-ście przykładowych, najbardziej niezbędnych dla każdego web developera, skompletowałem w dalszej części artykułu. Do Waszej dyspozycji oddaję także prosty serwis sprawdzający poprawność wprowadzanych wzorców.

1. Walidacja adresu e-mail opartego na hoście

Wzorzec:

/^([a-z0-9]{1})([^\s\t\.@]*)((\.[^\s\t\.@]+)*)@([a-z0-9]{1})((([a-z0-9-]*[-]{2})|([a-z0-9])*|([a-z0-9-]*[-]{1}[a-z0-9]+))*)((\.[a-z0-9](([a-z0-9-]*[-]{2})|([a-z0-9]*)|([a-z0-9-]*[-]{1}[a-z0-9]+))+)*)\.([a-z0-9]{2,6})([.]?)$/Diu

Opis:

Wyrażenie ma za zadanie sprawdzać, czy wprowadzony przez użytkownika adres e-mail ma poprawną formę. Aby test zakończył się sukcesem muszą zostać spełnione następujące warunki:

nazwa użytkownika musi zaczynać się od znaku litery lub cyfry, nie może zawierać spacji, tabulatorów, aty, za to mogą się znajdować w nim kropki, pod warunkiem, że nie występują jedna, po drugiej,
po nazwie użytkownika musi pojawiać się znak małpy,
domena, podobnie jak nazwa użytkownika, musi rozpoczynać się od litery, bądź cyfry, po czym do znaków dozwolonych dochodzą - oraz ., pod warunkiem, że pierwszy z wcześniej wymienionych znaków nie znajduje się na początku lub na końcu nazwy subdomeny (wyjątkiem są dwa myślniki na jej końcu odpowiadające często prefiksom xn--), a drugi nie jest poprzedzany swoim odpowiednikiem. TLD może mieć długość od dwóch do sześciu znaków,
domena może być zakończona kropką,
rozwiązanie nie sprawdza jak długi jest wprowadzony adres e-mail.

Strona testowa:

Tutaj.

Tekst spełniający warunki:

2.a_a-d@n-do.x-d.pl

Tekst nie spełniający warunków:

2.a_a-d@n-do.x-d.v-.pl (część domeny kończąca się nieprawidłowym znakiem)

Uwagi:

Jeżeli rozwiązanie w jakimkolwiek stopniu zawiedzie można pokusić się o użycie wyrażenia z ostatniej aktualizacji pliku logical_filters.c ze źródeł PHP.

Rozwiązanie oparte o wyrażenie regularne:

$email = trim('adres@domena.pl');
if ( !preg_match('/^([a-z0-9]{1})([^\s\t\.@]*)((\.[^\s\t\.@]+)*)@([a-z0-9]{1})((([a-z0-9-]*[-]{2})|([a-z0-9])*|([a-z0-9-]*[-]{1}[a-z0-9]+))*)((\.[a-z0-9](([a-z0-9-]*[-]{2})|([a-z0-9]*)|([a-z0-9-]*[-]{1}[a-z0-9]+))+)*)\.([a-z0-9]{2,6})([.]?)$/Diu', $email) )
{
	print 'Nieprawidłowy adres e-mail';
}

Rozwiązanie oparte o filter_var (PHP >= 5.2):

$email = trim('adres@domena.pl');
if ( (bool)filter_var($email, FILTER_VALIDATE_EMAIL) === false )
{
	print 'Nieprawidłowy adres e-mail';
}

2. Walidacja adresu e-mail opartego na hoście lub IPv4 serwera

Wzorzec:

/^([a-z0-9]{1})([^\s\t\.@]*)((\.[^\s\t\.@]+)*)@((([a-z0-9]{1})((([a-z0-9-]*[-]{2})|([a-z0-9])*|([a-z0-9-]*[-]{1}[a-z0-9]+))*)((\.[a-z0-9](([a-z0-9-]*[-]{2})|([a-z0-9]*)|([a-z0-9-]*[-]{1}[a-z0-9]+))+)*)\.([a-z0-9]{2,6})([.]?))|((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])))$/Diu

Opis:

Wyrażenie ma za zadanie sprawdzać, czy wprowadzony przez użytkownika adres e-mail ma poprawną formę. Aby test zakończył się sukcesem muszą zostać spełnione warunki z poprzedniego punktu oraz:

po znaku @ musi się pojawić opisany już wcześniej prawidłowo sformowany host lub adres IPv4 serwera w postaci czterech, dziesiętnych oktetów.

Strona testowa:

Tutaj.

Tekst spełniający warunki:

2.a_a-d@64.64.100.100

Tekst nie spełniający warunków:

2.a_a-d@64.64.256.100 (trzeci oktet jest po za zakresem)

Uwagi:

Jeżeli rozwiązanie w jakimkolwiek stopniu zawiedzie można pokusić się o użycie wyrażenia z ostatniej aktualizacji pliku logical_filters.c ze źródeł PHP.

Rozwiązanie oparte o wyrażenie regularne:

$email = trim('adres@85.64.100.100');
if ( !preg_match('/^([a-z0-9]{1})([^\s\t\.@]*)((\.[^\s\t\.@]+)*)@((([a-z0-9]{1})((([a-z0-9-]*[-]{2})|([a-z0-9])*|([a-z0-9-]*[-]{1}[a-z0-9]+))*)((\.[a-z0-9](([a-z0-9-]*[-]{2})|([a-z0-9]*)|([a-z0-9-]*[-]{1}[a-z0-9]+))+)*)\.([a-z0-9]{2,6})([.]?))|((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])))$/Diu', $email) )
{
	print 'Nieprawidłowy adres e-mail';
}

Rozwiązanie oparte o filter_var (PHP >= 5.2):

$email = trim('adres@domena.pl');
if ( (bool)filter_var($email, FILTER_VALIDATE_EMAIL) === false )
{
	print 'Nieprawidłowy adres e-mail';
}

3. Prosta weryfikacja adresu URL

Wzorzec:

/^(http|ftp)([s]{0,1}):\/\/([a-z0-9]{1})((([a-z0-9-]*[-]{2})|([a-z0-9])*|([a-z0-9-]*[-]{1}[a-z0-9]+))*)((\.[a-z0-9](([a-z0-9-]*[-]{2})|([a-z0-9]*)|([a-z0-9-]*[-]{1}[a-z0-9]+))+)*)(\.([a-z0-9]{2,6})){0,1}((:[0-9]){0}|(:[1-9]{1}[0-9]*))\//iu

Opis:

Zweryfikować, czy użytkownik wprowadził adres URL, wg wzoru:

protokół://adres_serwera:port/

dozwolone protokoły: http, https, ftp, ftps,
adres serwera w formie serwera lokalnego, subdomen, domeny i rozszerzenia,
port jest opcjonalny,
dalsze wprowadzone dane (jak Query String) nie są sprawdzane,
konstrukcja jest przeznaczona do sprawdzanie adresów opartych na IPv4.

Strona testowa:

Tutaj.

Tekst spełniający warunki:

http://m1chu.eu/

Tekst nie spełniający warunków:

htt://adres.com/temp/ (nieprawidłowy schemat)

Rozwiązanie oparte o wyrażenie regularne:

$url = trim('http://m1chu.eu');
if ( !preg_match('/^(http|ftp)([s]{0,1}):\/\/([a-z0-9]{1})((([a-z0-9-]*[-]{2})|([a-z0-9])*|([a-z0-9-]*[-]{1}[a-z0-9]+))*)((\.[a-z0-9](([a-z0-9-]*[-]{2})|([a-z0-9]*)|([a-z0-9-]*[-]{1}[a-z0-9]+))+)*)(\.([a-z0-9]{2,6})){0,1}((:[0-9]){0}|(:[1-9]{1}[0-9]*))\//iu', $url) )
{
	print 'Nieprawidłowy adres URL';
}

4. Wycinanie hosta z portem z adresu URL

Wzorzec:

/^(http|ftp)([s]{0,1}):\/\/((.*)\.[a-z0-9]{2,6}|((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]))){0,1}((:[0-9]){0}|(:[1-9]{1}[0-9]*))\//iu

Opis:

Pobrać host wraz z portem (jeżeli został podany) z URI. Pozostałe zasady są tożsame z wymienionymi w poprzednim punkcie.

Strona testowa:

Tutaj.

Tekst spełniający warunki:

http://m1chu.eu:80/ (zwróci: m1chu.eu:80)

Tekst nie spełniający warunków:

htt://adres.com/temp/ (nieprawidłowy schemat)

Rozwiązanie oparte o wyrażenie regularne:

$url = trim('ftps://stro.eu:1000/file.exe');
if ( preg_match('/^(http|ftp)([s]{0,1}):\/\/((.*)\.[a-z0-9]{2,6}|((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]))){0,1}((:[0-9]){0}|(:[1-9]{1}[0-9]*))\//iu', $url, $matches) )
{
	// $matches[3] - nazwa serwera z domeną lub adres IPv4
	// $matches[10] - port
	print $matches[3] . ':' . $matches[10];
}

5. Sprawdzanie adresu IP (protokół IPv4)

Wzorzec:

/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/Du

Opis:

Wykryć poprawność wprowadzonego w formie dziesiętnych oktetów IP (w wersji czwartej protokołu).

Strona testowa:

Tutaj.

Tekst spełniający warunki:

0.0.0.0

Tekst nie spełniający warunków:

101.256.0.1 (drugi oktet poza zakresem)

Rozwiązanie oparte o wyrażenie regularne:

$ipv4 = trim('192.168.0.1');
if ( !preg_match('/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/Du', $ipv4) )
{
	print 'Nieprawidłowy adres IPv4';
}

Rozwiązanie oparte o filter_var (PHP >= 5.2):

$ipv4 = trim('192.168.0.1');
if ( (bool)filter_var($ipv4, FILTER_VALIDATE_IP, FILTER_FLAG_IPV4) === false )
{
	print 'Nieprawidłowy adres IPv4';
}

6. Sprawdzamy adres IP z wykluczeniem puli prywatnych adresów (protokół IPv4)

Wzorzec:

/^([1-9]{1}[1-9]{0,1}|1\d([1-6]{1}|[8-9]{1})|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-4])$/Du

Opis:

Wykryć poprawność wprowadzonego IP (w wersji czwartej protokołu) z wykluczeniem części prywatnych i zastrzeżonych pul. Metoda nie dotyczy masek podsieci. Objęte wyjątki:

10.0.0.0 – 10.255.255.255,
0.0.0.0 – 0.255.255.255,
255.255.255.255,
127.0.0.0 – 127.255.255.255.

Strona testowa:

Tutaj.

Tekst spełniający warunki:

192.168.0.136

Tekst nie spełniający warunków:

0.0.0.0 (adres prywatny)

Uwagi:

Stosując funkcję ze zbioru filter_* odrzucone zostaną wszystkie zakresy adresów prywatnych i zastrzeżonych (np. 255.255.255.x).

Rozwiązanie oparte o wyrażenie regularne:

$ipv4 = trim('68.78.205.0');
if ( !preg_match('/^([1-9]{1}[1-9]{0,1}|1\d([1-6]{1}|[8-9]{1})|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-4])$/Du', $ipv4) )
{
	print 'Nieprawidłowy adres IPv4';
}

Rozwiązanie oparte o filter_var (PHP >= 5.2):

$ipv4 = trim('68.78.205.0');
if ( (bool)filter_var($ipv4, FILTER_VALIDATE_IP, FILTER_FLAG_IPV4 | FILTER_FLAG_NO_PRIV_RANGE | FILTER_FLAG_NO_RES_RANGE) === false )
{
	print 'Nieprawidłowy adres IPv4';
}

7. Sprawdzamy adres IP (protokół IPv6 i IPv4)

Wzorzec:

/^((([0-9A-Fa-f]{1,4}:){7}(([0-9A-Fa-f]{1,4})|:))|(([0-9A-Fa-f]{1,4}:){6}(:|((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})|(:[0-9A-Fa-f]{1,4})))|(([0-9A-Fa-f]{1,4}:){5}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){4}(:[0-9A-Fa-f]{1,4}){0,1}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){3}(:[0-9A-Fa-f]{1,4}){0,2}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){2}(:[0-9A-Fa-f]{1,4}){0,3}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:)(:[0-9A-Fa-f]{1,4}){0,4}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(:(:[0-9A-Fa-f]{1,4}){0,5}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})))(%.+)?$/Du

Opis:

Wykryć poprawność wprowadzonego IP (w wersji szóstej i czwartej protokołu).

Strona testowa:

Tutaj.

Tekst spełniający warunki:

fe80:0:0:0:0204:61ff:254.157.241.86

Tekst nie spełniający warunków:

2001:::db8:: (błędna notacja)

Uwagi:

Stosując funkcję ze zbioru filter_* odrzucone zostaną wszelkie adresy IPv4. W przedstawionym wyrażeniu regularnym adresy z tej wersji są akceptowane zarówno występując samotnie, jak i w postaci sekwencji czterech ostatnich bajtów w IPv6 (np. :247.125.68.4).

Rozwiązanie oparte o wyrażenie regularne:

$ipv6 = trim('fe80::204:61ff:fe9d:f156');
if ( !preg_match('/^((([0-9A-Fa-f]{1,4}:){7}(([0-9A-Fa-f]{1,4})|:))|(([0-9A-Fa-f]{1,4}:){6}(:|((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})|(:[0-9A-Fa-f]{1,4})))|(([0-9A-Fa-f]{1,4}:){5}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){4}(:[0-9A-Fa-f]{1,4}){0,1}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){3}(:[0-9A-Fa-f]{1,4}){0,2}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){2}(:[0-9A-Fa-f]{1,4}){0,3}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:)(:[0-9A-Fa-f]{1,4}){0,4}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(:(:[0-9A-Fa-f]{1,4}){0,5}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})))(%.+)?$/Du', $ipv6) )
{
	print 'Nieprawidłowy adres IPv6/IPv4';
}

Rozwiązanie oparte o filter_var (PHP >= 5.2):

$ipv6 = trim('fe80::204:61ff:fe9d:f156');
if ( (bool)filter_var($ipv6, FILTER_VALIDATE_IP, FILTER_FLAG_IPV6) === false )
{
	print 'Nieprawidłowy adres IPv6';
}

8. Wykrywanie kolorów RGB w postaci szesnastkowej

Wzorzec:

/^#?[0-9a-f]{3}(?:[0-9a-f]{3})?$/Diu

Opis:

Sprawdzić, czy wprowadzone dane są szesnastkowymi odpowiednikami zapisu kolorów modelu RGB.

Strona testowa:

Tutaj.

Tekst spełniający warunki:

#ff0000

Tekst nie spełniający warunków:

#a0hfg1 (g i h nie są znakami używanymi przy zapisie heksadecymalnym)

Rozwiązanie oparte o wyrażenie regularne:

$hex = trim('#0F15a2');
if ( !preg_match('/^#?[0-9a-f]{3}(?:[0-9a-f]{3})?$/Diu', $hex) )
{
	print 'Nieprawidłowy kod szesnastkowy koloru!';
}

9. Proste sprawdzenie nazwy użytkownika

Wzorzec:

/^([a-z0-9]{1})([a-z0-9_-]{2,11})$/Diu

Opis:

Wprowadzone dane muszą rozpoczynać się od znaku alfanumerycznego. Kolejne znaki mogą być ponadto myślnikiem lub podkreśleniem. Długość tekstu nie może być większa niż 12ście znaków.

Strona testowa:

Brak.

Tekst spełniający warunki:

m1chu

Tekst nie spełniający warunków:

_nick (pierwszy znak nie jest cyfrą, ani literą)

Rozwiązanie oparte o wyrażenie regularne:

$username = trim('m1chu');
if ( !preg_match('/^([a-z0-9]{1})([a-z0-9_-]{2,11})$/Diu', $username) )
{
	print 'Nieprawidłowa nazwa użytkownika!';
}

10. Proste sprawdzenie hasła użytkownika

Wzorzec:

/^(?=[a-z0-9_#@%\*-]*?[A-Z])(?=[a-z0-9_#@%\*-]*?[a-z])(?=[a-z0-9_#@%\*-]*?[0-9])([a-z0-9_#@%\*-]{8,24})$/Diu

Opis:

Wpisane hasło użytkownika musi mieć od ośmiu, do dwudziestu czterech znaków, pośród których musi być co najmniej jedna wielka litera, jedna mała i jedna cyfra. Dodatkowo dozwolone są: _, #, @, %, * i -.

Strona testowa:

Brak.

Tekst spełniający warunki:

1xY#n6%2V

Tekst nie spełniający warunków:

@1bbd2 (za krótki ciąg, brak wielkiej litery)

Rozwiązanie oparte o wyrażenie regularne:

$password = trim('To#jEst@_haSL-o%usera*');
if ( !preg_match('/^(?=[a-z0-9_#@%\*-]*?[A-Z])(?=[a-z0-9_#@%\*-]*?[a-z])(?=[a-z0-9_#@%\*-]*?[0-9])([a-z0-9_#@%\*-]{8,24})$/Diu', $password) )
{
	print 'Nieprawidłowa nazwa użytkownika!';
}

11. Zaznaczanie frazy w tekście

Wzorzec:

/\b(fraza)\b/iu

Opis:

Zamienianie podanej frazy na inną lub wystylowanie jej formy. Przydatna funkcja w wyszukiwarkach.

Strona testowa:

Brak.

Działanie:

szukana_fraza -> szukana_fraza

Rozwiązanie oparte o wyrażenie regularne:

$text = 'Wyszukane frazy: wyrażenia, regularne, preg_match, preg_replace';
$find = 'regularne';
print preg_replace('/\b(' . $find . ')\b/iu', '\\1', $text);

Rozwiązanie oparte o str_ireplace:

$text = 'Wyszukane frazy: wyrażenia, regularne, preg_match, preg_replace';
$find = 'regularne';
print str_ireplace($find, '' . $find . '', $text);

12. Zamiana tekstowych emotikon na graficzne

Opis:

Podmiana tekstowych uśmieszków na ich odpowiedniki graficzne. Wersja z użyciem str_ireplace.

Strona testowa:

Brak.

Rozwiązanie oparte o wbudowaną funkcję PHP:

$text_format = array(
	array(';)', ';-)', 'x)', ';]', ';-]'),
	array(':)', ':-)', '=)', ':]', ':-]'),
	array(':(', ':-(', '=(', ':[', ':-['),
	array(';(', ';-(', 'x(', ';[', ';-['),
	array(':P', ':-P', '=P'),
	array(':D', ':-D', '=D'),
	array(':*', ':-*', '=*'),
	array(':O', ':-O', '=O'),
	array(':/', ':-/', '=/')
	);

$image_format = array(
	'wink.png',
	'smile.png',
	'sad.png',
	'cry.png',
	'tongue.png',
	'bigsmile.png',
	'kiss.png',
	'surprise.png',
	'grimace.png'
	);

$text = 'To jest przykładowy tekst ;] Prawda, że fajny? :-D Pogrymasiłbym trochę =/, ale po co? :) Także do zobaczenia :*';

foreach ( $text_format as $key => $val )
{
	$text = str_ireplace($val, '', $text);
}

print $text;

13. Zamiana BBCode na HTML

Wzorzec przykładowy:

/\[b\](.*?)\[\/b\]/Dius

Opis:

Podmiana BBCode poprzez kod HTML. Funkcjonalność znana z forów internetowych.

Strona testowa:

Brak.

Działanie:

[i]pochylenie[/i] -> pochylenie

Uwagi:

W komercyjnych projektach należy skorzystać z bardziej zaawansowanych klas do obsługi tego problemu. Pozwoli to uniknąć np. problemu z nieprawidłowym zagnieżdżeniem kilku tagów BBCode w sobie.

Rozwiązanie oparte o wyrażenie regularne:

function bbcode2html($code) {
	$search = array(
        '/\[b\](.*?)\[\/b\]/Dius',
        '/\[i\](.*?)\[\/i\]/Dius',
        '/\[u\](.*?)\[\/u\]/Dius',
        '/\[s\](.*?)\[\/s\]/Dius',
        '/\[img\=(.*?)\](.*?)\[\/img\]/Dius',
        '/\[img\](.*?)\[\/img\]/Dius',
        '/\[url\](.*?)\[\/url\]/Dius',
        '/\[url\=(.*?)\](.*?)\[\/url\]/Dius',
        '/\[color\=(#?([a-f0-9]{6}|[a-f0-9]{3}))\](.*?)\[\/color\]/Dius',
        '/\[size\=([1-9]{1}[0-9]{0,2})(px|pt|em)\](.*?)\[\/size\]/Dius',
    	'/\[font\=([a-z0-9\s"]+)\](.*?)\[\/font\]/Dius',
    );

	$replace = array(
        '\\1',
        '\\1',
        '\\1',
        '\\1',
        '',
        '',
        '\\1',
        '\\2',
        '\\2',
        '\\3',
    	'\\2'
    );

	return preg_replace($search, $replace, $code);
}

14. Sprawdzenie poprawności wprowadzonego kodu pocztowego

Wzorzec:

/^[0-9]{2}-?[0-9]{3}$/Du

Opis:

Testowanie poprawności wpisanego kodu pocztowego (w formacie używanym w Polsce). Dozwolone są wersje z myślnikiem pomiędzy drugą i trzecią cyfrą, oraz bez niego.

Strona testowa:

Brak.

Tekst spełniający warunki:

62-150

Tekst nie spełniający warunków:

611-10

Rozwiązanie oparte o wyrażenie regularne:

$postcode = '61-610';
if ( !preg_match('/^[0-9]{2}-?[0-9]{3}$/Du', $postcode) )
{
	print 'Nieprawidłowy kod pocztowy';
}

15. Operowanie na znacznikach XML/XHTML

Wzorzec:

/<([a-z]+)([\s]{1}[^=]+[=]{1}[^<]+)*(?:>(.*)<\/\1>|\s+\/>)/u

Opis:

Sprawdzenie znaczników XML/XHTML oraz pobranie treści znajdującej się pomiędzy nimi.

Strona testowa:

Brak.

Rozwiązanie oparte o wyrażenie regularne:

$tag = 'm1chu.eu - another devblog';
if ( !preg_match_all('/<([a-z]+)([\s]{1}[^=]+[=]{1}[^<]+)*(?:>(.*)<\/\1>|\s+\/>)/u', $tag, $matches, PREG_PATTERN_ORDER) )
{
	print 'Nieprawidłowa konstrukcja znacznika';
}
else {
	print_r($matches); // print_r($matches[3]) - lista treści zawieranych w tagach
}

Słowem zakończenia

Starałem się jak najdokładniej sprawdzić powyższe wzorce. Nie mniej jednak, jak to zwykle bywa, mogą się w nich znaleźć błędy. Jeżeli ktoś takowe znajdzie, ma jakieś pytania, czy lepsze propozycje to proszę o komentarze pod wpisem.

Jak wspomniałem na wstępie, uruchomiłem serwis pozwalający na sprawdzanie wyrażeń regularnych względem podanego tekstu. Jest on aktualnie w fazie testów, więc mogą występować błędy w jego działaniu. Po zakończeniu wprowadzania poprawek baza wpisów zostanie wyczyszczona do zera. Można go testować, a w przyszłości korzystać pod dwoma adresami:

regexp.pl (adres główny)
regexp.m1chu.eu (adres alternatywny)

Pod względem danych sesyjnych obydwa adresy działają niezależnie. Zapraszam do testowania i wyrażania swojego zdania na moim blogu, w komentarzach tego artykułu.