URL 링크 자동 변환기: 텍스트 속 주소 찾는 원리
긴 설명 글이나 대화 로그 속에 섞여 있는 http, https 주소를 매번 손으로 <a> 태그로 감싸고 있다면, 이 작업은 정규식 한 줄로 자동화되는 단순한 문자열 치환입니다.
어떤 규칙으로 URL의 시작과 끝을 판별하는지, target과 rel 속성이 각각 무엇을 하는지 알면 결과 HTML을 그대로 믿고 쓸 수 있습니다.
이 글은 그 판별 규칙과 속성의 동작을 입력과 결과가 어떻게 대응하는지로 정리합니다.
요약 ① URL은
http또는https로 시작해 공백·줄바꿈·꺾쇠괄호(<>)·큰따옴표(") 앞에서 끝나는 문자열로 인식됩니다. ②target="_blank"는 링크를 새 창(새 탭)으로 열고,rel="noopener noreferrer"는 새로 열린 창이 원래 페이지의 제어권을 가져가지 못하게 막습니다. ③ 말줄임을 켜면 화면에 보이는 텍스트만 27자로 줄고,href에 담긴 실제 주소는 원본 그대로 유지됩니다.
URL이 텍스트로만 남아 클릭이 안 되는 상황
메신저나 메모장에서 복사한 글을 게시판, 이메일 본문, 사내 위키에 붙여넣으면 http로 시작하는 주소는 그냥 문자로만 보입니다. 브라우저가 주소창이나 특정 뷰어에서 링크처럼 밑줄을 그려주는 것과, 실제 HTML 소스에 <a> 태그가 있는 것은 다른 문제입니다.
예를 들어 참고 링크가 여러 개 섞인 발표 원고나, URL이 여러 줄에 걸쳐 나오는 고객 문의 로그를 그대로 웹페이지에 옮기면 주소마다 <a href="...">를 일일이 손으로 씌워야 합니다.
링크가 두세 개면 손으로 해도 되지만, 수십 개가 섞여 있으면 하나씩 찾아 감싸는 작업 자체가 번거롭습니다.
도구 없이 정규식으로 직접 링크로 바꾸는 방법
이 변환은 서버나 별도 프로그램 없이, 정규식 치환 한 번으로 끝나는 작업입니다. 정규식을 지원하는 편집기나 짧은 코드 한 줄만 있으면 손으로도 같은 결과를 만들 수 있습니다.
핵심이 되는 정규식은 다음과 같습니다.
/(https?:\/\/[^\s\r\n<>"]+)/g
이 패턴은 두 부분으로 나뉩니다.
https?:\/\/—http://또는https://로 시작하는 지점을 찾습니다.s?는 s가 있어도 없어도 매칭된다는 뜻이라 http와 https를 한 번에 잡아냅니다.[^\s\r\n<>"]+— 그 뒤로 공백, 줄바꿈, 꺾쇠괄호(<>), 큰따옴표(")가 아닌 문자를 하나 이상 이어 붙입니다. 이 다섯 가지 중 하나를 만나는 순간 URL이 끝났다고 판단합니다.
찾아낸 문자열을 <a href="찾은 URL">찾은 URL</a> 형태로 바꿔 끼우면 됩니다. 자바스크립트로 옮기면 다음 한 줄입니다.
text.replace(/(https?:\/\/[^\s\r\n<>"]+)/g, '<a href="$1">$1</a>')
여기에 새 창 열기나 보안 속성을 더하고 싶으면 치환 문자열에 속성을 추가하면 됩니다.
text.replace(/(https?:\/\/[^\s\r\n<>"]+)/g, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>')
target과 rel은 각각 다른 역할을 하는 속성입니다.
target="_blank"— 링크를 클릭했을 때 현재 탭이 아니라 새 탭(새 창)에서 열리게 합니다.rel="noopener noreferrer"— 새 탭이 원래 페이지의window.opener참조를 갖지 못하게 막습니다. 이 참조가 남아 있으면 새로 열린 페이지가 자바스크립트로 원래 탭의 주소를 바꿀 수 있는데,noopener가 그 경로를 막고noreferrer는 리퍼러 정보 전달까지 막습니다.
이 정규식과 치환 로직을 그대로 옮기면 도구 없이도 같은 결과를 얻을 수 있습니다. 다만 URL이 여러 개 섞여 있고 새창·보안속성·말줄임 옵션을 매번 손으로 켜고 끄려면, 그때마다 정규식과 치환 문자열을 고쳐 써야 합니다.
저희 도구로 확인하기.
가입 없이 무료로 사용할 수 있으며, 입력이 바뀌는 즉시 결과가 갱신됩니다.
자주 헷갈리는 부분
말줄임을 켜도 링크 주소(href)는 줄어들지 않습니다. 화면에 보이는 텍스트만 27자로 잘리고 뒤에 "..."이 붙습니다.
실제로 클릭했을 때 이동하는 곳은 원본 URL 그대로입니다. 표시 텍스트와 href를 같은 것으로 착각하면 "짧아진 주소를 복사해도 되는 줄" 오해가 생깁니다.
class 속성은 링크의 겉모습을 CSS로 따로 지정하기 위한 이름표입니다.
- 입력란에 class 값을 넣으면 결과
<a>태그에class="입력한값"이 그대로 붙습니다. - 이 이름을 스타일시트의 선택자로 쓰면 색상, 밑줄 여부, hover 효과 등을 별도로 정할 수 있습니다.
- class를 비워두면
<a>태그에 class 속성 자체가 붙지 않습니다.
옵션별로 결과 HTML에 실제로 무엇이 붙는지 정리하면 다음과 같습니다.
| 옵션 | 켜짐(체크) | 꺼짐(미체크) |
|---|---|---|
| 새창 열기 | target="_blank" 추가, 새 탭에서 열림 | 속성 없음, 현재 탭에서 이동 |
| 보안 속성 | rel="noopener noreferrer" 추가 | 속성 없음 |
| 긴 URL 말줄임 | 30자 초과 시 화면 텍스트만 27자+"..."로 표시(href는 원본 유지) | 원본 URL 전체가 화면 텍스트로도 표시 |
이 정규식은 공백·줄바꿈·꺾쇠괄호·따옴표만 URL의 종료 기준으로 삼습니다. 그래서 "이 글(https://example.com)을 보세요"처럼 URL 뒤에 괄호나 마침표, 쉼표가 바로 붙어 있으면 그 문장부호까지 링크 문자열에 함께 포함됩니다.
문장부호를 링크에서 빼려면 원본 텍스트에서 URL과 문장부호 사이에 공백을 넣어두면 됩니다.
정리
- URL 인식 기준은
http://또는https://로 시작해서 공백·줄바꿈·<·>·"중 하나를 만나기 전까지입니다. target="_blank"는 새 탭에서 열리게 하고,rel="noopener noreferrer"는 새 탭이 원래 페이지를 조작하지 못하게 막는, 서로 다른 역할의 두 속성입니다.- 말줄임은 화면에 보이는 텍스트만 27자로 줄일 뿐, href에 담긴 실제 이동 주소는 원본 그대로 유지됩니다.
- class 값을 넣으면 결과
<a>태그에 그 값이 그대로 붙어 CSS로 스타일을 따로 지정할 수 있습니다. - URL 뒤에 공백 없이 붙은 문장부호는 링크 문자열에 함께 포함됩니다.
가입 없이 무료로 사용할 수 있으며, 입력이 바뀌는 즉시 결과가 갱신됩니다.
자주 묻는 질문
텍스트에 URL이 여러 개 있으면 전부 한 번에 바뀌나요?
네. 정규식 끝에 붙은 g(global) 플래그가 텍스트 전체를 훑으면서 일치하는 문자열을 모두 찾아 바꾸도록 합니다. 첫 번째 URL만 찾고 멈추지 않고, 입력한 텍스트 안의 http·https 주소를 전부 링크로 바꿉니다.
www.example.com처럼 http가 없는 주소도 링크로 바뀌나요?
바뀌지 않습니다. 정규식이 https?://로 시작하는 문자열만 찾기 때문에, 프로토콜 표기가 빠진 주소는 인식 대상에서 제외됩니다. 링크로 바꾸려면 원본 텍스트에 http:// 또는 https://를 붙여야 합니다.
미리보기와 소스코드는 어떻게 다른가요?
미리보기는 변환된 HTML을 실제로 렌더링해서 보여주는 화면으로, 링크가 밑줄이나 색으로 표시되고 클릭도 됩니다. 소스코드는 그 결과를 만든 <a href="...">...</a> 형태의 HTML 텍스트 자체이며, 그대로 복사해 다른 문서나 코드에 붙여넣을 수 있습니다.
입력을 바꾸면 버튼을 눌러야 결과가 갱신되나요?
아니요. 별도의 변환 버튼이 없습니다. textarea의 입력이 바뀌는 change 이벤트마다 정규식 매칭과 치환이 다시 계산되어, 미리보기와 소스코드에 즉시 반영됩니다.