HTML renkler için düzenli ifade (regexp)

Derse geri dön

#ABCDEF şeklinde yazılmış HTML-renklerini aramak için bir düzenli ifade oluşturun: önce # ve ardından 6 tane onaltılık karakter gelmesi lazım.

Bir kullanım örneği:

          let regexp = /...senin duzenli ifaden.../

let str = "color:#121212; background-color:#AA00ef bad-colors:f#fddee #fd2 #12345678";

alert( str.match(regexp) )  // #121212,#AA00ef

NOT: Bu görevde #123 veya rgb(1,2,3) vb. diğer renk formatlarına ihtiyacımız yoktur.

# ve ardından 6 tane onaltılık karakterin gelmesine ihtiyacımız var.

Onaltılık bir karakter [0-9a-fA-F] şeklinde ifade edilebilir. Veya eğer i bayrağını kullanırsak, [0-9a-f] şeklinde ifade edilebilir.

Daha sonrasında {6} nicelik belirtecini kullanarak bunlardan 6 tanesini seçebiliriz.

Sonuç olarak, /#[a-f0-9]{6}/gi düzenli ifadesine sahibiz.

let regexp = /#[a-f0-9]{6}/gi;

let str = "color:#121212; background-color:#AA00ef bad-colors:f#fddee #fd2"

alert( str.match(regexp) );  // #121212,#AA00ef

Buradaki sorun daha uzun değerleri de bulmasıdır:

alert( "#12345678".match( /#[a-f0-9]{6}/gi ) ) // #12345678

Bunu çözmek için, sona \b ekleyebiliriz:

// renk
alert( "#123456".match( /#[a-f0-9]{6}\b/gi ) ); // #123456

// bir renk değil
alert( "#12345678".match( /#[a-f0-9]{6}\b/gi ) ); // null