JS / 문자열 자르기 feat.티스토리 스킨 커스텀

cateBadge 로 변수 선언한 부분은 아래 캡쳐에서 썸네일 좌측 상단에 있는 Record 부분을 말하는 것이다.

원래 카테고리명은 상위카테고리/하위카테고리로 표시가 되지만, 하위카테고리만 표시되도록 하고 싶은 경우에 활용 가능하다.

lastIndexOf & substring

lastIndexOf() 메서드는 주어진 값과 일치하는 부분을 fromIndex로부터 역순으로 탐색하여, 최초로 마주치는 인덱스를 반환합니다. 일치하는 부분을 찾을 수 없으면 -1을 반환합니다.

substring() 메소드는 string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환합니다.

IndexOf 함수의 종류인 lastIndexOf를 사용하여 뒤부터 탐색하여 최초로 마주치는 / 부터 잘라주면 된다.

끝점으로부터 처음 만나는 /의 위치를 숫자로 반환해줄 거고, 그것보다 +1을 한 것부터 substring해야 / 를 제외한 값을 얻을 수 있다.

예시

const str = 'Mozi/lla';

console.log(str.lastIndexOf("/"));
// Expected output: 4

console.log(str.substring(4));
// Expected output: "/lla"

console.log(str.substring(4+1));
// Expected output: "lla"

실제 코드

// 커스텀 리스트 카테고리명
    const cateBadgeTitle = document.querySelectorAll(".description-cate");
    window.addEventListener('load', function() {
      function cateBadgeHandler(catebadge){
        const cateBadgeText = catebadge.textContent;
        if(cateBadgeText.includes('/')){
          catebadge.textContent = cateBadgeText.substring(cateBadgeText.lastIndexOf('/')+1);
        }
      }
      cateBadgeTitle.forEach(cateBadgeHandler);
    });

 

Reference

String.prototype.lastIndexOf() - JavaScript | MDN

String.prototype.substring() - JavaScript | MDN

01 String 함수: indexOf() 와 lastIndexOf()