이 예제는 아래와 같이 게시판 등에서 글을 작성할 때 유튜브 주소를 추가하면, 해당 주소에서 유튜브 동영상 ID를 추출한 후 iframe 플레이어 형태로 변환합니다.

 

1. 텍스트에서 유튜브 URL을 가져오는 정규표현식을 작성합니다.
// 유튜브 URL 찾는 패턴
const youtubeUrl = /(http:|https:)?(\/\/)?(www\.)?(youtube.com|youtu.be)\/(watch|embed)?(\?v=|\/)?(\S+)?/g

이렇게 하면 아래와 같이 유튜브 주소를 찾을 수 있습니다.

 

2. 해당 텍스트를 DOM 으로부터 불러온 뒤, innerHTML을 replace 합니다.
<div id="content">
유튜브 영상에서 주소를 복사한 후 글 아무데나 삽입하면 됩니다.

https://www.yㅇutube.com/watch?v=WZiD8_XHENA

https://yㅇutu.be/J0dHN1yC0NI
</div>
const content = document.querySelector("#content")

// str.replace(regexp|substr, newSubstr|function)
const wrappedContent = content.innerHTML.replace(youtubeUrlExp, youtubeParser)

정규식에서 매칭된 결과를 영상 재생이 가능한 태그로 대체할 것입니다. 참고로 replace에서 대체할 텍스트 대신 함수를 사용하는 것이 가능합니다. 함수는 매치된 텍스트 및 그룹화된 텍스트(정규식인 경우)를 파라미터로 받아 사용이 가능합니다.

참고 문서: 두 번째 파라미터가 function으로 지정되었을 때

 

3. 텍스트를 대체하는 함수를 만듭니다. (youtubeParser)
function youtubeParser(url, ...groups) {
  const container = `
    <div class="video-container">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/#ID#" title="YouTube video player"
        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
    </div>`
  
  return groups && groups[6].length == 11
    ? container.replace("#ID#", groups[6])
    : url;
}

 

위의 정규식에 따르면, 정규식 매치 결과의 그룹 목록 중 7번($7)이 유튜브 동영상의 ID를 담고 있습니다. container 변수는 실제로 유튜브에서 공식적으로 제공하는 iframe 플레이어 태그 부분이며, 아이디 위치 부분(#ID#)을 실제 아이디로 대체하여 해당 동영상을 재생하도록 합니다. groups 배열에서는 6번째 원소에 아이디가 담겨 있으므로 groups[6] 을 사용합니다.

...groupsRest 파라미터라 하여 여러 파라미터를 한꺼번에 묶어 배열 형태로 사용할 수 있도록 합니다. Rest 파라미터를 사용하지 않는다면 파라미터는 (url, p1, p2, p3, p4, p5, p6, p7, ...) 로 작성한 다음 p7을 사용합니다.

 

 

4. 유튜브 태그가 적용된 코드를 innerHTML에 적용합니다.
content.innerHTML = wrappedContent

 

문의 | 코멘트 또는 yoonbumtae@gmail.com


카테고리: WEB: Frontend


8개의 댓글

yap · 2022년 12월 22일 5:42 오후

안녕하세요! 티스토리 스킨 만들때 이글을 참고 했습니다!
다만 질문이 있어서 댓글 남겨요!

function youtubeParser(url, …groups) 이 부분에서 groups 를 대체하거나 groups 를 없애고도
텍스트를 자동변환 할 수 있게 하려면 어떻게 해야하는지 답변해주실 수 있나요?
티스토리에 사용하니 공감버튼이 있는 부분 div 이름에 groups가 들어가서 그런지
오류가 생겨서 T^T
정말,,몇일을 검색하고 알아보던 와중에 정보가 나오지를 않아
공감버튼을 삭제하는 방법을 찾긴 했는데 혹시나 하고 댓글 남깁니다 ㅠㅠ

    yoonbumtae (BGSMM) · 2022년 12월 22일 6:10 오후

    groups는 원래 정해져 있는 게 아니라 제가 임의로 정한 이름이라서 해당 이름을 전부 다른걸로 바꾸면 될 것 같습니다.

    코드

    참고: String/replace#매개변수가_function으로_지정되었을_때

      yap · 2022년 12월 22일 6:15 오후

      정말 감사합니다 !!! 추운데 감기조심하시고 늘 좋은일만 행복한일만 가득하세요 !!👍👍

        yap · 2022년 12월 22일 6:19 오후

        마지막으로 한가지만 질문 해도될까요,, customName 을 해당이름으로 바꿨더니 재생이 되지않아서,, 그대로 텍스트로 나옵니다! 이 부분은 어떻게 해야하는건가요? ㅠㅠㅠ죄송해요

          yap · 2022년 12월 22일 6:23 오후

          앗 아니예요!! 제가 댓글을 대충읽었네요 너무 감사합니다 ㅎ해결했습니다!! 정말 너무 감사해요!!!!

          yoonbumtae (BGSMM) · 2022년 12월 22일 6:27 오후

          저도 궁금해서 위의 코드펜.io 예제로 테스트하고 있었는데 잘 해결되셨다니 다행입니다 댓글 감사합니다

yap · 2022년 12월 22일 7:33 오후

다시왔습니다,, groups 문제가 아니라 본문에 텍스트만 써보니 공감div안에 아이프레임이 자동생성 되더라구요.
를 특정div 안에 생성해도 하단 구간에 생성되는데
이걸 제가 원하는 위치에 생성하는 방법이 있나요? ㅠ9ㅠ

    yoonbumtae (BGSMM) · 2022년 12월 22일 7:55 오후

    뭔가 질문 내용이 잘린 것 같은데 공감 div가 무엇인지 모르겠습니다…자바스크립트 youtubeParse 안의 container 변수에 있는 [div class="video-container"][/div] 부분을 삭제해보세요.
    그리고 iframe 은 유튜브 재생하려면 꼭 있어야 하는 태그라 이 태그는 대체할 수 없습니다.

답글 남기기

Avatar placeholder

이메일 주소는 공개되지 않습니다.

계산결과를 입력해주세요 (스팸댓글 방지용) − 7 = 1