[Javascript] 정규식으로 헥스 코드 추출하기

정규식으로 헥스 코드 추출하기

헥스 코드는 색을 표시하는 16진수의 코드입니다.

흔히 "#ff3e1a"와 같은 여섯 자리로 표시되지만, 투명도를 담당하는 '알파채널'이 추가되어 8자리로 이루어지는 경우도 있습니다.

 

어떤 요소의 클래스로 헥스 코드가 박혀있고 이를 자바스크립트로 가져와야 할 때 아래와 같은 방법으로 가져오면 됩니다.

document.addEventListener("DOMContentLoaded", () => {
    const button = document.querySelector("li button");
    const classes = button.className.split(" ");

    const colorCode = classes.find(className => /^[a-fA-F0-9]{6}([a-fA-F0-9]{2})?$/.test(className));

    console.log(colorCode);
});

핵심은 정규식인데, 정규식 /^[a-fA-F0-9]{6}$/는 다음을 의미합니다

• ^ : 문자열의 시작.
• [a-fA-F0-9] : 16진수 문자를 의미.
• {6} : 정확히 6개의 문자가 있어야 함.
• ([a-fA-F0-9]{2})? : 2자리 문자가 있을 수도 있고, 없을 수도 있음을 의미.
• $: 문자열의 끝.