jQuery | 경력을 기준으로 sort

 

 

경력을 기준으로 정렬해보자 ( 많은 순으로 ) 

 

 

 

---

 

먼저 경력관련한 부분의 html 을 살펴보자

 

 

신입의 경우

 

경력자의 경우

 

 

신입의 경우에는 "newcomer" 클래스가 더 추가된다. 

이를 이용해서 구분에 쓰면 될 것 같다.

 

 

 

경력은 어떻게 정렬할 수 있을까?

 

 2년 6개월의 경력자와 3년 1개월의 경력자가 있다고 하자

1년은 12개월이기 때문에

 

2x12 + 6 = 30 개월

3x12 + 1 = 37 개월 

 

이렇게 구분할 수 있다. 

 

이 사실을 이용해서 해결해보자 

 

// HTML 코드의 모든 tr 요소를 선택
  $('tr').each(function() {
    // 각 tr 요소에서 경력 정보를 추출
    var careerSpan = $(this).find('.career');
    if (careerSpan.length) {
      var careerText = careerSpan.text().trim();
      var match = careerText.match(/(\d+)(년|개월)/g);
      if (match) {
        var months = 0;
        match.forEach(function(matchedText) {
          var parts = matchedText.split(/(\d+)/);
          var num = parseInt(parts[1]);
          var unit = parts[2];
          if (unit == '년') {
            num *= 12;
          }
          months += num;
        });
        // tr 요소에 경력 개월 수를 추가
        $(this).attr('data-career-months', months);
      }
    }
  });

  // 경력 개월 수를 기준으로 tr 요소를 정렬
  var trList = $('tr').get();
  trList.sort(function(a, b) {
    var aMonths = $(a).attr('data-career-months');
    var bMonths = $(b).attr('data-career-months');

    if ($(a).find('.career').hasClass('newcomer')) {
      return 1;
    } else if ($(b).find('.career').hasClass('newcomer')) {
      return -1;
    } else if (aMonths < bMonths) {
      return 1;
    } else if (aMonths > bMonths) {
      return -1;
    } else {
      return 0;
    }
  });

  // 정렬된 tr 요소를 다시 tbody에 추가
  var tbody = $('tbody');
  $.each(trList, function(i, tr) {
    tbody.append(tr);
  });

 

 

carrerText.match(/(\d+)(년|개월)/g);

정규표현식 패턴

/ : 정규표현식이 시작됨
(\d+) : 괄호 안에 있는 \d 는 숫자 하나 이상을 의미한다.
           이 패턴은 하나 이상의 숫자를 나타내는 패턴이다.
(년|개월) : 년 또는 개월을 나타내는 문자열 패턴
/ : 정규표현식의 끝
g : 전역 검색 옵션. 이 옵션을 사용하면 일치하는 모든 패턴을 모두 찾아서 반환함

=> 문자열에서 숫자와 단위 정보(년, 개월)를 추출할 수 있는 함수

careerText 문자열에서 (\d+)(년|개월) 패턴과 일치하는 모든 문자열을 추출하여 match 변수에 저장한다.

 

 

 

---

 

경력 정렬 

 

 

신입 정렬

 

 

 

 

 

 

---

 

문제 발견

 

경력 정렬이 제대로 되지않고 있다...