안드로이드 개발 팁 #50 - jsoup 활용하여 HTML 요소의 내부 HTML의 단어들 순회 방법

jsoup 활용하여 HTML 요소의 내부 HTML의 단어들 순회 방법

---

시작하며…

스팀잇 포스트의 포맷은 마크다운 텍스트입니다. commonmark 라이브러리를 활용하여 이를 HTML 텍스트로 바꿀 수 있는데요. HTML 요소(element)들의 텍스트에서 유튜브 URL이 있으면 이를 iframe 요소로 변경하고자 합니다. 사용자가 이해할 수 없는 URL 대신 동영상을 보여주기 위해서입니다. 마찬가지로 텍스트에서 이미지 URL이 있으면, 이를 img 요소로 대체하고자 합니다. URL 대신 이미지를 보여주기 위해서이지요. 이를 위해서는 각 요소가 보유 중인 텍스트의 각 단어를 순회해야 합니다. 오늘 포스트에서는 jsoup을 활용하여 HTML 요소의 내부 HTML의 단어들을 순회하는 방법을 정리해 봅니다.

---

필요 라이브러리

• jsoup: 지난 포스트 참고

---

jsoup 활용하여 HTML 요소의 내부 HTML의 단어들 순회 방법

(1) 먼저 마크다운 텍스트를 HTML로 변환하고 Element 객체들을 보유하는 Document 객체를 생성하세요.

val document = markdown.convertMarkdownToHtmlDocument()

convertMarkdownToHtmlDocument() 확장 메소드는 이 포스트를 참고하세요.

(2) Document 객체로부터 각 Element 객체를 순회하는 루프를 만드세요. 자식 Element를 갖는 부모 Element에 대해서는 아무 것도 하지 않고 패스합니다.

for (element in document.allElements) {
    if (element.childrenSize() > 0) {
        continue
    }

    // ...
}

(3) 현재 Element로부터 내부 HTML을 읽고, 이를 라인들로 분해하세요.

for (element in document.allElements) {
    if (element.childrenSize() > 0) {
        continue
    }

    val innerHTML = element.html()
    val innerHTMLLines = innerHTML.lines()
    // ...
}

(4) 각 라인으로부터 단어들로 분해하고 이들을 순회하는 루프를 만드세요.

for (element in document.allElements) {
    if (element.childrenSize() > 0) {
        continue
    }

    val innerHTML = element.html()
    val innerHTMLLines = innerHTML.lines()

    innerHTMLLines.forEachIndexed { lineIndex, line ->
        val words = line.split(" ")

        words.forEachIndexed { wordIndex, word ->
            // 이 곳에서 각 단어를 확인하고 일부는 iframe, img 등과 같은 요소로 변환 예정
        }
    }
}

---

참고 링크

• jsoup: Java HTML Parser
• Element 클래스

---

지난 안드로이드 개발 팁

• #49 - jsoup 활용하여 HTML 요소 정의 방법
• #48 - 마크다운 텍스트를 HTML 텍스트로 변환하고 Jsoup Document 객체로 변환하는 방법
• #47 - 마크다운 텍스트를 HTML 텍스트로 변환 방법
• #46 - HTTPS URL이 유튜브 사이트인지 판별 방법
• #45 - HTTPS URL의 내용이 이미지인지 판별
• #44 - 유튜브 URL로부터 플레이 시작 위치 읽는 방법
• #43 - 유튜브 URL로부터 비디오 ID 읽는 방법
• #42 - 문자열이 여러 개의 서브문자열들 중 하나로 시작하는 또는 끝나는지 판별하기
• #41 - 액티비티에 전체 화면 적용 방법 (린백 옵션)
• #40 - 웹뷰에서 구글 로그인 우회 방법
• #39 - 스크린 항상 키는 방법
• #38 - 핸들러를 코루틴으로 대체하기
• #37 - 내비게이션 활용하여 프래그먼트간 이동
• #36 - DB Browser for SQLite에서 쿼리 실행 방법
• #35 - DB Browser for SQLite 사용법
• #34 - SQLite 데이터베이스 도구 DB Browser for SQLite 다운로드
• #33 - adb 명령어 사용을 위한 PATH 환경 변수 설정
• #32 - 코틀린 언어로 구현한 확장 함수를 자바 코드에서 호출하는 방법
• #31 - UTC 시간을 지역 시간으로 변환하는 함수
• #30 - Collection, MutableCollection 연산 확장 함수 filter, count, indexOfFirst, sortWith, sortedWith
• #29 - 프로젝트에 벡터 이미지 추가하기
• #28 - JSON 자료를 데이터 클래스로 자동 변환하는 방법
• #27 - 페이스북 로그인이 안 되는 문제
• #26 - 레이아웃 XML 파일에 이모지 문자 넣는 방법
• #25 - TED permission 라이브러리를 활용한 권한 요청
• #24 - EditText 뷰에 텍스트 입력하고 0.5초 후 액션 설정
• #23 - Uri 객체로부터 읽은 파라메터에서 '+' 문자가 ' '로 바뀌어 있는 문제
• #22 - RxJava 활용하여 몇초 후 코드 실행
• #21 - 맥북 아이클라우드로 프로젝트 복사 후 빌드 안 되는 문제
• #20 - 툴바 정의 방법 (1) 타이틀 및 배경색 설정
• #19 - Index corrupted 오류
• #18 - 오래된 프로젝트의 build.gradle 파일 수정
• #17 - 뷰 바인딩 적용된 프래그먼트에 데이터 바인딩 적용 후 빌드시 발생하는 오류
• #16 - 특정 일이 속하는 주의 모든 날짜를 배열로 구하는 방법
• #15 - RecyclerView에 리스트를 로딩한 후 처리할 일 작성
• #14 - RecyclerView 뷰에서 항목 클릭시 뷰가 깜빡이는 문제
• #13 - 공통으로 사용할 색상 리소스 만들고 뷰에 적용
• #12 - 코틀린 언어 변환시 추가로 수정할 build.gradle 파일들
• #11 - 리스트/배열로부터 찾을 원소의 위치 읽기
• #10 - 앱의 다크 모드 진입 막는 방법
• #9 - 데이터 바인딩/뷰 바인딩 사용하지 않을 경우 자체적으로 만드는 Views 클래스
• #8 - TextView에 linear gradient color 적용하기
• #7 - 다이얼 화면 연결하기 위해 Activity 클래스의 확장 메소드 작성
• #6 - 웹 브라우저를 여는 확장 메소드 작성
• #5 - HTML 적용된 TextView에서 링크 클릭은 어떻게 구현?
• #4 - RxJava의 Observable, Single 객체의 기본 설정 수행 메소드 정의하기
• #3 - 특정 화면 이동시 다른 화면 모두 닫기
• #2 - HTML 이스케이핑 적용된 문자 풀어주기
• #1 - TextView로 HTML 내용 보여주기

---

Posted through the ECblog app (https://blog.etain.club)