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));
-
(•́ ✖ •̀)
알 수 없는 사용자
-
댓글 입력