[Typescript] 유튜브 링크 임베딩 형식으로 변환 및 체크

  // 유튜브 링크 형식 변환
  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>을 통해 유튜브 영상을 렌더링 하기위해 필요한 링크