javascript - 从输入字段中获取值并提取 ID

Question

我目前正在通过 javascript 使用正则表达式来提取 YT 视频 ID。我有一个工作示例。但不是使用var exaxmpleYoutubeURLs. 有没有办法创建一个输入字段，可以将链接复制到其中，然后ID通过 ajax 显示十一位数？这是我的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>