댓글 검색 목록

[javascript] won - HTML 웹 페이지를 보는 새로운 방법

페이지 정보

작성자 운영자 작성일 20-06-05 15:13 조회 744 댓글 0

Web Object Notation

https://gianlucatarantino.github.io/won/

소개

Won은 다목적 HTML / CSS에서 JSON으로 (또는 그 반대로) 변환 도구입니다.

웹 개발 분야의 다양한 응용 프로그램에 매우 유용합니다. 예를 들어 C와 같은 일부 지루한 언어로 웹 페이지를 구문 분석하고 수정하는 데 도움이 됩니다.

쉬운 JSON만 사용하면 되기 때문입니다. 최근 C++로 웹 스크래핑 프로젝트를 만드는 동안 이와 같은 언어로 HTML 페이지를 코드 (및 인간) 친화적으로 표현하기가 매우 어렵다는 것을 알았기 때문에 WON을 만들었습니다. (그것은 또한 나의 첫 번째 오픈 소스 프로젝트입니다!)

어떻게 만들어 지나요?

현재 NPM 시나리오에서 HTML 구문 분석을 위한 가장 빠른 구현이기 때문에 htmlparser2를 사용하여 Node.JS에서 작성됩니다 (리포지토리 확인, 멋진 노드 패키지 임).

(CSS 파싱의 경우 조금 어려움을 겪고 있었지만 CSS 파싱을 위해 꽤 괜찮은 알고리즘을 사용하여 스택 오버플로에 대한 답변을 찾았으므로 "왜 그렇지 않습니까?"라고 말했습니다. 그 대답에서 알고리즘을 가져옵니다.)

CLI 작동 방식

현재 CLI 유틸리티 및 JS 라이브러리입니다. JS 버전과 함께 다른 언어 바인딩도 개발 될 것입니다.

won -hj pathToFile.html을 사용하면 유효한 WON 객체처럼 구조화 된 JSON 출력 파일을 얻게 됩니다.

won -jh pathToFile.json을 사용하면 HTML 파일을 얻게 됩니다.

CSS와 동일하지만 h 대신 c를 사용하십시오 (예 : won -cj pathToFile.css). -o outputName.o를 추가하여 출력 파일의 이름을 판별하십시오.

JS 바인딩은 어떻게 작동합니까

JS 버전과 함께 다른 언어 바인딩도 개발 될 것입니다.

예제 코드

const won = require("won");
let exampleHTML = `
<html>
    <head>
        <title>Test</title>
    <head>
</html>
`
let wonObject = won.HTMLtoJSON(exampleHTML);
console.log(wonObject.children[0].children[0].text); // Test