[타입스크립트 예제] 정규 표현식 regex, 유튜브에서 id값만 추출해서 EMBED 해보기

 

https://youtu.be/t3M6toIflyQ 개발자라면 정규표현식은 꼭 쓰게되기 때문에 하루 날 잡고, 알아두는 것이 좋음

*엘리님 영상을 보고 학습한 포스팅입니다.

 

슬래쉬를 이용해서 정규표현식임을 알려준다. 각종 텍스트 에디터에서 반영가능, 슬래쉬 안에 찾고자하는 패턴을 작성하면 됨, 어떤 옵션을 이용해서 검색할 건지 플래그를 세울 수 있다(i)

어떻게 원하는 패턴을 작성해나가는지가 중요 포인트이다.

 

📓 영상에서 언급된 자료들 깃허브 정리 ⇢ https://github.com/dream-ellie/regex 

RegexOne(퀴즈) ⇢ https://regexone.com/

GitHub - dream-ellie/regex

RegexOne - Learn Regular Expressions - Lesson 1: An Introduction, and the ABCs

연습용 사이트(강의노트) ⇢ regexr.com/5mhou

RegExr: Untitled 5mhou

RegExr: Learn, Build, & Test RegEx

 

 

텍스트에서 특정한 패턴을 찾을 때 요긴하게 쓰이는 정규 표현식

 

정규표현식을 사용하면 이메일주소 양식 혹은 비밀번호 양식이 잘 맞는지

유효한 전화번호나 주소 양식인지 잘 확인하고 거를 수 있다.

 

다음은 유튜브 영상을 웹에 embed하기 위해 아이디값만 추출하는 예제이다.

 

const regExp =
      /^(?:https?:\/\/)?(?:www\.)?(?:(?:youtube.com\/(?:(?:watch\?v=)|(?:embed\/))([a-zA-Z0-9(-|_)]{11}))|(?:youtu.be\/([a-zA-Z0-9(-|_)]{11})))/;

---

const regExp =
      /^(?:https?:\/\/)?(?:www\.)?(?:(?:youtube.com\/(?:(?:watch\?v=)|(?:embed\/))([a-zA-Z0-9(-|_)]{11}))|(?:youtu.be\/([a-zA-Z0-9(-|_)]{11})))/;

 

(?:https?:\/\/) 캡처링하지는 않음, https로 시작할 수도 있고,(?는 옵셔널)

(?:www\.) www.도 옵셔널이고 캡처링하지 않는다.

따라서 https로 시작하나 www로 시작하나, 아예 없는 경우에도 잘 작동할 수 있다.

그 다음 두 가지 경우가 있다.

(?:youtube.com\/(?:(?:watch\?v=)|(?:embed\/))([a-zA-Z0-9(-|_)]{11}))|(?:youtu.be\/([a-zA-Z0-9(-|_)]{11}))

 

| 또는 마크가 기준

(?:youtube.com\/(?:(?:watch\?v=)|(?:embed\/))([a-zA-Z0-9(-|_)]{11}))

(?:youtu.be\/([a-zA-Z0-9(-|_)]{11}))

 

youtube.com에 해당하는 첫번째 그룹과,

youtu.be로 시작하는 두번째 그룹으로 나뉘어져 있다.

 

match 돌리면 youtube.com에 해당하는 첫번째 그룹은 그룹1에 들어가게 될 것이고,

match 돌리면 youtu.be에 해당하는 첫번째 그룹은 그룹2에 들어가게 될 것이다.

 

 

 

(?:youtube.com\/(?:(?:watch\?v=)|(?:embed\/))([a-zA-Z0-9(-|_)]{11}))

를 상세히 보면 watch 또는 embed가 될 수 있다

a-zA-Z0-9(-|_) 소문자 a부터 z 또는 대문자 A부터 Z,0부터 9까지의 숫자 그리고 - 또는 _ 대쉬 중에서 11개를 추출해온다

 

(?:youtu.be\/([a-zA-Z0-9(-|_)]{11})) 

두번째 케이스에서도 문자열규칙을 동일하게 적용해준다.

---

 

 

 

  private convertToEnbeddedURL(url: string): string {
    const regExp =
      /^(?:https?:\/\/)?(?:www\.)?(?:(?:youtube.com\/(?:(?:watch\?v=)|(?:embed\/))([a-zA-Z0-9-]{11}))|(?:youtu.be\/([a-zA-Z0-9-]{11})))/;
    const match = url.match(regExp); //string에 정의된 match 함수에 정규표현식을 전달하면, 매칭되는 것이 있을시 배열을 반환한다
    const videoId = match ? match[1] || match[2] : undefined; //매치된게 있음, 즉 undefined이 아니라면 매치된 배열 첫번째 인덱스, 첫번째가 없다면 두번째로 매치된 것을 쓸 것, 그럼에도 전체적으로 매치된게 없다면 undefined
    if (videoId) {
      return `https://www.youtube.com/embed/${videoId}`;
    }
    return url;
  }
}

//정규표현식 Regex
//input url
//https://www.youtube.com/watch?v=Nu2iC44BpR0
//https://youtu.be/Nu2iC44BpR0
//위와 같은 사용자 입력 URL에서 embed용 URL로 변환시켜야함
//output url
//https://www.youtube.com/embed/Nu2iC44BpR0
//iframe width="1213" height="480" src="https://www.youtube.com/embed/Nu2iC44BpR0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>/iframe>
//특징 id값이 동일함 : Nu2iC44BpR0

 

 

console.log(match) 를 찍었을 때 다음과 같이 나왔다.

2번째 그룹에 매칭된 모습

RegExr: Untitled 5kqkr (fork)

RegExr: Learn, Build, & Test RegEx

예시

import { VideoComponent } from "./components/page/Item/video.js";
import { PageComponent } from "./components/page/page.js";

class App {
  private readonly page: PageComponent;
  constructor(appRoot: HTMLElement) {
    this.page = new PageComponent();
    this.page.attachTo(appRoot);

    const video = new VideoComponent(
      "video Title",
      "https://www.youtube.com/embed/Nu2iC44BpR0" 
      //https://www.youtube.com/watch?v=Nu2iC44BpR0를 써도 정상 작동
      //https://youtu.be/Nu2iC44BpR0 써도 정상작동
      //정규표현식 덕분
    );
    video.attachTo(appRoot, "beforeend");

  }
}

new App(document.querySelector(".document")! as HTMLElement);

 

export interface Component {
  attachTo(parent: HTMLElement, position?: InsertPosition): void;
}
export class BaseComponent<T extends HTMLElement> implements Component {
  protected readonly element: T;
  constructor(htmlString: string) {
    const template = document.createElement("template");
    template.innerHTML = htmlString;
    this.element = template.content.firstElementChild! as T;
  }
  attachTo(parent: HTMLElement, position: InsertPosition = "afterbegin") {
    parent.insertAdjacentElement(position, this.element);
  }
}

 

import { BaseComponent } from "../../component.js";

export class VideoComponent extends BaseComponent<HTMLElement> {
  constructor(title: string, url: string) {
    super(`<section class="video">
    <div class="video__player"><iframe class="video__iframe"></iframe></div>
    <h3 class="video__title"></h3>
  </section>`);

    const iframe = this.element.querySelector(
      ".video__iframe"
    )! as HTMLIFrameElement;
    iframe.src = this.convertToEnbeddedURL(url); //url -> videoId -> embed //https://youtu.be/9tMyAwbVbvM

    const titleElement = this.element.querySelector(
      ".video__title"
    )! as HTMLHeadingElement;
    titleElement.textContent = title;
  }
  private convertToEnbeddedURL(url: string): string {
    const regExp =
      /^(?:https?:\/\/)?(?:www\.)?(?:(?:youtube.com\/(?:(?:watch\?v=)|(?:embed\/))([a-zA-Z0-9(-|_)]{11}))|(?:youtu.be\/([a-zA-Z0-9(-|_)]{11})))/;
    const match = url.match(regExp);
    const videoId = match ? match[1] || match[2] : undefined;
    if (videoId) {
      return `https://www.youtube.com/embed/${videoId}`;
    }
    return url;
  }
}

//정규표현식 Regex
//input url
//https://www.youtube.com/watch?v=Nu2iC44BpR0
//https://youtu.be/Nu2iC44BpR0
//위와 같은 사용자 입력 URL에서 embed용 URL로 변환시켜야함
//output url
//https://www.youtube.com/embed/Nu2iC44BpR0
//iframe width="1213" height="480" src="https://www.youtube.com/embed/Nu2iC44BpR0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>/iframe>
//특징 id값이 동일함 : Nu2iC44BpR0