본문 바로가기
🎯 JavaScript/📱Web에서 JS 사용하기

21. 북마크바를 통해 자바스크립트 적용하기 (WordCounter 문제풀이)

by Basemenks 2021. 9. 8.

 

1. 문제의 목적

 

북마크바를 이용해 실제로 사용되는 웹페이지에서 자바스크립트를 실행해,

그 문서에서 쓰인 단어의 리스트를 만들어본다.

 

대상 페이지는 위키피디아에서 English Language를 검색한 페이지이다.

 

 

사진과 같이 WC라는 북마크바를 눌렀을 때, 대상 단어의 갯수와 대상 단어가 alert된다.

 

이 문제에서의 제한사항은 다음과 같다.

 

1. 한글이나 영어로 이루어진 단어만을 대상으로 한다.
2. 가장 빈번하게 나온 단어 순서대로 정렬한다
3. 단어는 띄어쓰기로 구분된 문자들을 칭한다.
4. 코드에 각주를 넣으면 인식을 못한다! (// 뭐시기뭐시기)

 

 

2. 실행 방법

 

필자는 크롬을 통해 진행했으며, 사파리나 엣지에서도 북마크를 만들어 주면 된다.

 

 

 

북마크의 URL을 수정해주는데, javascript: 뒤에 자신이 작성한 코드를 붙여넣기만 하면 된다.

오류 가능성이 있으니 코드에 세미콜론(;)을 반드시 붙이는 것을 추천한다!

 

 

 

3. 나의 방법

 

푸는 스타일이 사람마다 다를 것이나, 필자는 split() / innerText / array.method (map, filter, forEach...) 을 주로 사용했다.

 

객체와 배열을 사용해서 풀어도 충분한 듯하다. 아래는 필자의 풀이이다!

 

더보기
let t = document.getElementsByTagName('body');
let wordObj = {}, resultStr = '';;

t[0].innerText.split('\n').map(a => a.split(' ')).flat(1).filter(a => a.replace(/[^(a-z|A-Z|ㄱ-ㅎ|가-힣)]/g, "")).forEach(a => wordObj[a] ? (wordObj[a] += 1) : (wordObj[a] = 1));
let resultArr = Object.entries(wordObj);

resultArr.sort((a, b) => b[1] - a[1]).forEach(a => resultStr += (`${a[1]}, ${a[0]} \n`));
alert(resultStr);

 

먼저 문자열은 body태그 안에 있을 것이니 body태그를 전부 가져와버린다.

 

이후에 t[0].innerText를 통해, body 내의 모든 문자열에 접근할 수 있다.

이 때 innerHTML이나 textContent를 쓰면 안 된다.

innerHTML은 <div>~</div> 이런 식으로 노드 전체를 가져와버리고,

textContent는 우리가 원하는 text node에 추가로 잡다한 text를 더 불러온다.

 

split('\n')을 통해 body 안의 서로 다른 태그들의 문자열들을 모아와 줄 수 있다. 

map을 통해 배열의 각각 요소에 띄어쓰기를 구분해준다.

flat(1)은 배열 내부 요소에 또 배열이 있으면 , 그 배열 안의 요소들을 밖으로 끄집어 내준다. (참고)

 

filter을 통해 영어나 문자가 아닌 것들을 제거해줄 수 있는데 이는 필자의 이전 글을 참고하면 딱이다.

2021.09.08 - [💻 개발공부/🎁 JS 관련 지식] - 정규식으로 한글, 영어, 숫자만 입력받기 (javascript)

 

forEach 부분은 상당히... 고민스러운 부분인데, 필자는 이를 코딩테스트를 연습하면서 익혔다.

풀어서 설명하자면, wordObj라는 객체에 배열의 요소가 존재한다면 +1을 해주고, 아니면 (배열요소):1 이렇게 만들어준다.

이 객체를 통해, 문서 내의 단어들의 개수를 세어줄 수 있다.

 

Object.entries(obj) obj의 key와 value로 이루어진 쌍의 배열을 요소로 가지는 새로운 배열을 만들어준다.

예를 들어 {name:'Lee',age:25} 는 [['name','Lee'],['age',25]] 가 된다.

 

sort를 통해 resultArr의 요소들을 개수를 기준으로 배열해주며, resultStr이 최종적으로 alert되는 문자열이다.

 

 

즐거운 문제풀이 되시길..🥳

댓글0