프론트엔드/Typescript
[Typescript] 유튜브 링크 임베딩 형식으로 변환 및 체크
순코딩
2025. 4. 18. 11:36
// 유튜브 링크 형식 변환
function formatVideoLink(link: string) {
// 정규식 설명:
// ^@? - 문자열 시작, @ 기호 포함 가능 (선택적)
// (?:https?:\/\/)? - URL의 시작 부분, http:// 또는 https:// (선택적)
// (?:www\.)? - www. 부분 (선택적)
// (?:youtube\.com\/watch\?v=|youtu\.be\/) - 유튜브 도메인과 경로 패턴 (2가지 형식)
// ([a-zA-Z0-9_-]{11}) - 유튜브 비디오 ID (11자리 영숫자, 언더스코어, 하이픈)
// (?:[?&]si=[^&]*)? - ?si= 또는 &si= 파라미터와 그 값 (선택적)
const regex =
/^@?(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})(?:[?&]si=[^&]*)?/;
const match = link.match(regex);
// 비디오 ID가 추출되면 임베드 링크 형식으로 변환
if (match && match[1]) {
return `https://www.youtube.com/embed/${match[1]}`;
}
return null;
}
// 유튜브 링크 유효성 검사
function checkCorrectLink(link: string) {
// 정규식 설명:
// ^@? - 문자열 시작, @ 기호 포함 가능 (선택적)
// (?:https?:\/\/)? - URL의 시작 부분, http:// 또는 https:// (선택적)
// (?:www\.)? - www. 부분 (선택적)
// (?:youtube\.com\/watch\?v=|youtu\.be\/) - 다음 두 가지 패턴 중 하나와 일치:
// - youtube.com/watch?v= (일반 유튜브 URL)
// - youtu.be/ (유튜브 짧은 URL)
// ([a-zA-Z0-9_-]{11}) - 유튜브 비디오 ID (11자리 영숫자, 언더스코어, 하이픈)
// (?:[?&]si=[^&]*)? - ?si= 또는 &si= 파라미터와 그 값 (선택적)
const regex =
/^@?(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})(?:[?&]si=[^&]*)?/;
return regex.test(link);
}
위 함수는 아래 유튜브 링크1과 링크2와 같은 링크 형식들을 링크 3 형식으로 변환함으로써 <iframe>을 통해 유튜브 영상을 불러올 수 있도록 합니다.
https://youtu.be/Bg2MA0835M4?si=rjaAyGxB8vRqBPMA
링크1 : 유튜브 영상 > 공유 버튼 > 복사
https://www.youtube.com/watch?v=Bg2MA0835M4
링크 2 : 유튜브 영상 > 브라우저 url 복사
https://www.youtube.com/embed/Bg2MA0835M4
링크 3 : <iframe>을 통해 유튜브 영상을 렌더링 하기위해 필요한 링크