[티스토리] 티스토리 Tag 영역 바꾸기 / JS 정규식으로 마지막 콤마 제거

DOM에서 상위 클래스 선택 하고, 하위노드를 출력한다.
HtmlCollection은 Array가 아니므로 Array로 바꿔준다.
map돌려서 textContent로 정규식을 이용해 콤마를 제거한다.

스타일 변경

원래는 이렇게 생겼다.

 

기존의 Tag영역을 Chip 형태로 바꾸고싶어서 일단 스타일을 변경하기로 했다. 
심플한 검정색 칩으로 할거라 스타일을 수정했다.

/* Tag 태그 */
.box-tag .title-sidebar{
	margin-bottom:20px;
}
.area-aside .box-tag a{
	background-color:#242424;
	color:white;
	padding:4px 12px;
	border-radius:50px;
}
.area-aside .box-tag a:hover{
	cursor:pointer;
	background-color:#999;
}
.area-aside .box-tag a:last-child:after{
	display:none; 
}

 

수정 후

 

뒤에 붙어있는 콤마 제거

태그에 콤마가 붙어있어서 제거하는게 좋을것같아 제거했다.

// 상위노드 선택
const tagBox = document.getElementsByClassName('box_tag'); 

// Array로 변경
let arrayOfElements = Array.from(tagBox[0].children); 

//콤마 제거
arrayOfElements.map(item=>item.textContent = item.text.replace(/,\s*$/, ""))

 

Array.from

Array.from(arrayLike, mapFn, this.arg)
유사배열객체나, 반복가능객체를  얕은복사해서 새로운 Array를 만들어준다.
바로 맵을 돌릴수 있어서 한줄처리로 바꿨다.

const tagBox = document.getElementsByClassName('box_tag');
Array.from(tagBox[0].children, item=>item.textContent = item.text.replace(/,\s*$/, ""));

완성!

 

좀더 태그 같아진것같다. 클릭커블한 영역이 육안으로 보이는게 마음에 든다.