콘솔에서 html 단순 파싱하기

업무상 깃허브 오픈소스를 확인하고 내부 컴포넌트 등을 파악하는 일을 많이한다.

파이썬으로 크롤러를 만들수 있지만, 본격적으로 각을 잡고 크롤러를 개발하기 전에

정말 생각한게 맞는지 검증하고, 계획하기 위해 그냥 단순하게 엑셀로 정리해보기도 하는데

이럴때 콘솔 html 파싱이 정말 유용하다.

 

물론 사이트마다 html 이 각기 달라 그때그때 코드를 좀 변경해줘야하지만

참고용 코드가 있으면 변형하기도 쉽다.

 

//깃허브 페이지에서 폴더명 파싱하는 스크립트
let text = '';
$('html').querySelectorAll('.js-navigation-open.Link--primary').forEach(function(item, index){
  text += ( item.innerText + `
`);
});
console.log(text);

 

예를들면 아래와 같이 anrangodb의 3rd Party 라이브러리들을 엑셀로 정리하고 싶을 때 위 스크립트를 사용하면 바로 복붙을 하면 엑셀에 예쁘게 정리된다.

https://github.com/arangodb/arangodb/tree/devel/3rdParty

엑셀에 예쁘게 붙여진다.

 

 

.querySelectAll 에서 파싱하고자 하는 클래스를 적고 다른 페이지 상황에 따라 맞게 설정만 해주면 파싱이 쉬울것이다.

let text = '';
$('html').querySelectorAll('.{파싱하고싶은 클래스명}').forEach(function(item, index){
  text += ( item.innerText + `
`);
});
console.log(text);