DOM className을 정규표현식을 사용하여 원하는 className만 추출하기.

조회수 3085회

안녕하세요, 정규표현식과 관련하여 질문이 있어서 올립니다. 아래와 같은 className이 여러개인 경우 조건을 충족하는 className만 추출하는 정규표현식이 있는지 문의 드립니다.

  • className="scrollbar-v scrollbar-show scrollbar-disabled goodDash badCamell forExample1"
  • 조건1 : "-"가 들어가 있는 클래스
  • 조건2 : "_"가 들어가 있는 클래스
  • 위 조건에 충족하는 클래스 : 총 3가지 "scrollbar-v" "scrollbar-show" "scrollbar-disabled"

읽어봐 주셔서 감사합니다.

  • (•́ ✖ •̀)
    알 수 없는 사용자

2 답변

  • <div class="scrollbar-v scrollbar-show scrollbar-disabled goodDash badCamell forExample1">
      <p>Test</p>
    </div>
    

    HTML 파일이 위와 같다고 가정해보겠습니다.

    let matched = [];
    
    // 아래를 통해 해당 태그의 모든 클래스명이 담긴 Array를 얻을 수 있고,
    const classes = document.querySelector("div").classList
    
    /*
     * for문을 통해서 classes라는 Array의 Element를 순회하면서
     * 해당 조건을 충족하는 요소들을 구할 수 있습니다.
    */
    
    for (let i = 0, max = classes.length; i < max; i++) {
        if (/[-_]/g.test(classes[i])) {
            matched.push(classes[i]);
        }
    }
    
    console.log(matched);
    // ["scrollbar-v", "scrollbar-show", "scrollbar-disabled"]
    

    만약 지금 가정한 HTML 파일과 달리, 태그가 많고, 해당 태그에 동시에 여러 Class가 있는데,

    해당 조건에 맞는 ClassName들을 삭제해야 할 경우에는,

    아래와 같은 함수를 사용할 수 있을 것 같습니다.

    function solution(tag) {
      const tagList = document.querySelectorAll(tag);
    
      for (let i = 0, max = tagList.length; i < max; i++) {
        if (/[-_]/g.test(tagList[i].className)) {
          for (let j = 0, maxi = tagList[i].classList.length; j < maxi; j++) {
              if (/[-_]/g.test(tagList[i].classList[j])) {
                tagList[i].classList.remove(tagList[i].classList[j])
              }
          }
        }
      }
    }
    
    solution("div");
    

    원하시는 답변이 아닐 경우, 댓글을 남겨주시면 답변드리도록 하겠습니다.

    감사합니다.

    • 저는 전체 ClassName을 정규표현식 적용하여 추출하는 것을 생각 하였는데, 알려주신 방법과 같이 ClassName개별로(ClassList) 적용을 하는것이 맞는 방법인것 같습니다. 답변 감사합니다. 알 수 없는 사용자 2017.3.13 21:12
  • const className = 'scrollbar-v scrollbar-show scrollbar-disabled goodDash badCamell forExample1'; // tag.className;
    console.log(className.match(/[^\s]*[-_][^\s]*(?=\s|$)/g));
    
    • (•́ ✖ •̀)
      알 수 없는 사용자

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)