티스토리 뷰
- 특정 텍스트를 넣어서 검색한 결과 html 을 수집 (크롤링)
- 수집한 html 내 <script> 태그 안의 데이터를 추출해야 함
작성한 내용
const url = `URL`;
fetch(url)
.then((response) => response.text())
.then((data) => {
const parser = new DOMParser();
const doc = parser.parseFromString(data, 'text/html');
const json = doc.getElementById("__SCRIPT_TAG_ID__").innerHTML;
});
}
👉🏻 fetch를 통해 받아온 html 데이터를 넘겨서 html파일로 인식하게 작업하는 데에 참고한 코드
더보기
fetch('/about').then(function (response) {
// The API call was successful!
return response.text();
}).then(function (html) {
// Convert the HTML string into a document object
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html');
// Get the image file
var img = doc.querySelector('img');
console.log(img);
}).catch(function (err) {
// There was an error
console.warn('Something went wrong.', err);
});
👇🏿 참고 링크
response 처리에 대해
- response.text() – 응답을 읽고 텍스트를 반환합니다,
- response.json() – 응답을 JSON 형태로 파싱합니다,
- response.formData() – 응답을 FormData 객체 형태로 반환합니다. FormData에 대한 자세한 내용은 다음 챕터에서 다루겠습니다.
- response.blob() – 응답을 Blob(타입이 있는 바이너리 데이터) 형태로 반환합니다.
- response.arrayBuffer() – 응답을 ArrayBuffer(바이너리 데이터를 로우 레벨 형식으로 표현한 것) 형태로 반환합니다.
- 이 외에도 response.body가 있는데, ReadableStream 객체인 response.body를 사용하면 응답 본문을 청크 단위로 읽을 수 있습니다.
DOMParser, parseFromString 에 대해
var parser = new DOMParser(); // DOMParser 객체를 생성함.
var doc = parser.parseFromString(html, 'text/html'); // parseFromString() 메소드를 이용해 문자열을 파싱함.
'Chrome Extension' 카테고리의 다른 글
Chrome Extension - background ↔ contentscript 간의 메세징 async await (0) | 2022.01.11 |
---|---|
Chrome Extension 프로젝트 생성, 개발환경 세팅방법 (0) | 2022.01.05 |
Chrome Extension - Content Security Policy 관련 오류 (0) | 2022.01.03 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 서버리스
- nodejs
- elastic-builder
- 크롬익스텐션
- webhook
- docker-compose
- 람다
- AWS
- branch조회
- 웹훅
- container접속
- git동기화
- elasticsearch
- Lambda
- serverless
- contentScript.js
- background.js
- github
- 도커
- Error "server gave HTTP response to HTTPS client"
- ChromeExtension
- should
- 깃헙
- docker exec
- Hoisting
- 디스코드
- aws cli
- NestJS
- docker
- JavaScript