입력 필드에서 값을 가져와 ID를 추출

Question

현재 javascript를 통해 regex를 사용하여 YT 비디오 ID를 추출하고 있습니다. 나는 실천 사례가있다. 하지만 대신 var exaxmpleYoutubeURLs을 사용하십시오. 링크를 복사 할 수있는 입력 필드를 만드는 방법이 있습니까? 그리고 Ajax를 통해 11 자리 숫자 ID을 표시합니까? 여기에 내 JSFIDDLE

var youtubePattern = /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube\.com(?:\/embed\/|\/v\/|\/watch\?v=|\/ytscreeningroom\?v=|\/feeds\/api\/videos\/|\/user\S*[^\w\-\s]|\S*[^\w\-\s]))([\w\-]{11})[?=&+%\w-]*/ig; 

var exmpleYouTubeURLs = [ 
    "http://www.youtube.com/embed/NLqAF9hrVbY", 
]; 

// Extract the YouTube ID 
function linkifyYouTubeURLs(text) { 
    return text.replace(youtubePattern, '$1'); 
} 

for(i=0; i < exmpleYouTubeURLs.length; i++) { 
    document.writeln(i + ". " + linkifyYouTubeURLs(exmpleYouTubeURLs[i]) + "<br>"); 
} 

Answer 1

원하십니까?

<textarea id="links"></textarea> 
<input type="button" onclick="extractLinks()" value="Extract" /> 
<div id="outputDiv"></div> 

<script> 
    function extractLinks() { 

     var youtubePattern = /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube\.com(?:\/embed\/|\/v\/|\/watch\?v=|\/ytscreeningroom\?v=|\/feeds\/api\/videos\/|\/user\S*[^\w\-\s]|\S*[^\w\-\s]))([\w\-]{11})[?=&+%\w-]*/ig; 

     var exmpleYouTubeURLs = document.getElementById('links').value.split('\n'); 
     var output = document.getElementById('outputDiv'); 

     function linkifyYouTubeURLs(text) { 
      return text.replace(youtubePattern, '$1'); 
     } 

     output.innerHTML = ''; 
     for(i=0; i < exmpleYouTubeURLs.length; i++) { 
      output.innerHTML += i + ". " + linkifyYouTubeURLs(exmpleYouTubeURLs[i]) + "<br >"; 
     } 
    } 
</script>