.brand {

	font-size: 22px;

	color: #ff0000;

	background-color: #00ff00;

  border-color: #ddd;

	margin: 10px 10px 10px 5px;

	padding: 2em 1em 2em 1em;

}

• / #[ 0-9 A-F a-f ] / g

  • #으로 시작되는 16진수 컬러값을 추출하기 위한 문자 집합 패턴
  • 3 matches ( [ "#f", "#0", "#d" ] )

• / #[ 0-9 A-F a-f ] [ 0-9 A-F a-f ] / g

  • 동일한 패턴을 하나 더 추가
  • 3 matches ( [ "#ff", "#00", "#dd" ] )

• / #[ 0-9 A-F a-f ] [ 0-9 A-F a-f ] [ 0-9 A-F a-f ] / g

  • 동일한 패턴을 세 번 반복
  • 3 matches ( [ "#ff0", "#00f", "#ddd" ] )

• / #[ 0-9 A-F a-f ] { 6 } / g

  • 같은 패턴의 반복 횟수를 지정할 수 있는 메타 문자 ( {} ) 를 사용
  • 앞의 패턴을 반복 횟수를 지정
  • 2 matches ( [ "#ff0000", "#00ff00" ] )

• / #[ 0-9 A-F a-f ] { 6 } | [ 0-9 A-F a-f ] { 3 } / g

  • 6번 반복되는 컬러값 외에도 3번 반복되는 컬러값 패턴도 대응하기 위해 3번 반복 페턴을 OR 로 추가
  • 3 matches ( [ "#ff0000", "#00ff00", "#ddd" ] )

• / #[ 0-9 A-F a-f ] { 3, 6 } / g

  • 반복 지정을 { from, to } 로 할 수 있음
  • 앞선 패턴이 3번 이상 6번 이하 반복되는 패턴으로 정규식을 간소화 시킴
  • 3 matches ( [ "#ff0000", "#00ff00", "#ddd" ] )

• / #[ 0-9 A-F a-f ] + ; / g

  • 컬러값의 마지막이 항상 세미콜론(;) 으로 끝나기 때문에 반복 횟수 지정을 사용하지 않고 세미콜론까지 무한 반복 형태로 변경
  • 그러나 추출된 문자열에 세미콜론까지 포함되는 문제점 발생
  • 3 matches ( [ "#ff0000;", "#00ff00;", "#ddd;" ] )

• / #[ 0-9 A-F a-f ] + (?=;) / g

  • 패턴을 일치시키는 위치를 지정하는 위치 지정 메타 문자 중 전방 탐색 연산자를 (?=) 사용하여 추출 시 세미콜론을 제거

    

    

  • 3 matches ( [ "#ff0000", "#00ff00", "#ddd" ] )