JS REGREX 정규식 표현 공부하기 (유튜브 videoId 추출 정규식 표현)

 

https://regexr.com/5l6nr

RegExr: Learn, Build, & Test RegEx

경우의수 1 ) https://www.youtube.com/watch?v=k9B_-8G7s3Y
경우의수 2 ) www.youtube.com/watch?v=k9B_-8G7s3Y
경우의수 3 ) youtube.com/watch?v=k9B_-8G7s3Y 

경우의수 4 ) https://youtu.be/k9B_-8G7s3Y
경우의수 5 ) youtu.be/k9B_-8G7s3Y

경우의수 6 ) https://www.youtube.com/embed/k9B_-8G7s3Y
경우의수 7 ) www.youtube.com/embed/k9B_-8G7s3Y
경우의수 8 ) youtube.com/embed/k9B_-8G7s3Y

 

사용한 정규식

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

 

------------------------------------------------------------------------------------------------------------------------------------------------------------

^ -> ^이후로 포함하는것

----------------------------------------------------

\/ -> / 
\/\/ -> //
\? -> ?

----------------------------------------------------

(?:https?:\/\/)? -> (?:"포함하는 문자열"?:) ? 이거나

(?:www\.)? -> -> (?:"포함하는 문자열"?:) ? 이거나

----------------------------------------------------

(  ?:(?:문자열 그룹 A.  (?: (?:문자열 소그룹 A1) | (?:문자열 소그룹 A2) )     )  | ?:(?:문자열 그룹 B)  ) 

----------------------------------------------------

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




----------------------------------------------------

(?:embed\/))   ([a-zA-Z0-9(-|_)]{11})   ->    embed + k9B_-8G7s3Y     ->     embed/k9B_-8G7s3Y    ->      문자열 a-z, A-Z, 0-9, - 또는 _ 포함해서 11자리 가져오기

----------------------------------------------------

 

유튜브 videoId 추출 정규식 표현

0.00MB

 

 

 

 

이후 VUE Watch 에서

data(){
	return {
	     dialog	: false,
    	 editedItem: { 
            youtube:null,
         },
    }
}

// data가 객체일경우 ? watch에서는 ""로 감싸주기
watch:{
	// data가 객체가 아닐경우우 ? 그냥
      dialog (val) { 
        val || 
        this.close() 
      },
      "editedItem.youtube"(url){
        if(!!url){
            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);
            console.log(match,'match')
            const videoId = match ? match[1] || match[2] : undefined;
            console.log(videoId,'videoId')
            !!videoId ? this.editedItem.youtube = `https://www.youtube.com/embed/${videoId}` : this.editedItem.youtube = url;
        }
      }
    },

 

결과값