HTML 링크 추출기

HTML의 링크 주소와 텍스트를 JSON으로 추출하고 기준 URL로 상대 주소를 해석합니다.

HTML의 a 태그에서 href 주소와 링크 글자를 목록으로 뽑습니다. 기준 URL을 넣으면 상대 경로를 절대 주소로 바꿔 보여 줍니다.

사용 순서

HTML 조각이나 페이지 소스를 입력란에 붙여 넣습니다.
상대 경로를 절대 주소로 바꾸고 싶으면 기준 URL 칸에 페이지 주소를 넣습니다.
결과 JSON의 href와 text 값을 확인합니다.
결과를 복사해 링크 점검이나 목록 작업에 사용합니다.

예시

기준 URL에 https://it-box.dev/guide/index.html 을 넣고 <a href="/docs?x=1&y=2">Docs & help</a><a href="https://example.com">Example</a> 를 입력하면 [{"href":"https://it-box.dev/docs?x=1&y=2","text":"Docs & help"},{"href":"https://example.com/","text":"Example"}] 가 나옵니다.

한계

a 태그의 href만 추출하며 link, img, area 같은 요소와 src 속성은 대상이 아닙니다. href가 없는 a 태그는 건너뜁니다. 기준 URL이 없으면 href 원문을 그대로 보여 줍니다. 기준 URL은 http와 https만 허용합니다. 자바스크립트로 만들어지는 링크는 HTML 원문에 없으면 찾지 못합니다.

보안 주의

href 값에 javascript: 스킴이 있으면 기준 URL을 넣었는지와 관계없이 결과에 그대로 나옵니다. 추출한 주소를 자동으로 방문하거나 테스트 스크립트에 넣기 전에 스킴과 도메인을 확인하세요. 점검 목적이라도 대상 서버에 짧은 시간 많은 요청을 보내지 않도록 주의하세요.

배경 지식

웹 페이지의 링크는 a 요소의 href 속성에 들어 있습니다. 상대 경로(/docs)나 상위 디렉터리 경로(../img)는 페이지 주소를 기준으로 해석해야 실제 주소가 됩니다. 브라우저는 이 규칙을 URL 표준에 따라 처리하며, 이 도구도 같은 URL 생성자로 기준 주소와 합칩니다. 링크 목록은 사이트 구조 점검, 깨진 링크 확인, 수집 작업 전 준비 단계에서 자주 쓰입니다.

HTML 속성 값에는 &처럼 엔티티가 들어가므로 속성을 읽을 때 디코딩해야 실제 쿼리 문자열이 됩니다. 이 도구는 DOM의 getAttribute로 디코딩된 값을 얻습니다. 정규식으로 href를 긁으면 &가 그대로 남아 쿼리가 깨집니다. 링크 텍스트도 중첩된 span이나 블록 요소 안의 글자까지 모아야 사용자가 보는 글자와 맞습니다.

자주 묻는 질문

같은 링크가 여러 번 나오면 중복이 제거되나요?

아니요. a 요소가 나오는 순서대로 모두 목록에 들어갑니다. 중복을 없애려면 결과 JSON을 받아 href 기준으로 따로 정리해야 합니다.

기준 URL은 어떤 주소를 넣어야 하나요?

실제 페이지 주소를 넣는 것이 가장 정확합니다. docs처럼 슬래시가 없는 상대 경로는 기준 주소의 마지막 경로 조각을 기준으로 해석되므로, index.html이 붙은 주소와 디렉터리 주소의 결과가 달라질 수 있습니다.

텍스트가 없는 링크는 어떻게 보이나요?

태그 안에 글자가 없으면 text 값은 빈 문자열이 됩니다. 아이콘만 있는 링크는 img의 alt 속성이 있어도 텍스트에 포함되지 않으므로 빈 값으로 나옵니다. 접근성 점검에서는 이 빈 값이 중요한 신호가 됩니다.