HTML에서 쓰이는 색상 검출을 위한 정규표현식
#ABCDEF
과 같이 HTML에서 사용하는 색상을 검출할 수 있는 정규표션식을 만들어보세요. 해당 색상은 첫 글자 #
과 6개의 16진수로 구성됩니다.
예시:
let regexp = /...your regexp.../
let str = "color:#121212; background-color:#AA00ef bad-colors:f#fddee #fd2 #12345678";
alert( str.match(regexp) ) // #121212,#AA00ef
참고: 이 과제에선 #123
또는 rgb(1,2,3)
같은 다른 색상 포맷은 고려하지 않아도 됩니다.
6개의 16진수가 뒤에 오는 #
을 찾아야 합니다.
16진수 문자는 [0-9a-fA-F]
와 같이 표현할 수 있습니다. i
플래그를 사용하는 경우엔 [0-9a-f]
로도 표현 가능합니다.
이후 수량자(quantifier) {6}
를 사용해 6개의 16진수를 찾습니다.
그 결과 /#[a-f0-9]{6}/gi
라는 정규표현식이 도출됩니다.
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
그런데 이 정규표현식은 6자리보다 긴 16진수가 뒤에 오는 경우도 검출한다는 문제가 있습니다.
alert( "#12345678".match( /#[a-f0-9]{6}/gi ) ) // #123456
이를 해결하려면 정규표현식 끝부분에 \b
를 추가하면 됩니다.
// color
alert( "#123456".match( /#[a-f0-9]{6}\b/gi ) ); // #123456
// not a color
alert( "#12345678".match( /#[a-f0-9]{6}\b/gi ) ); // null