结合两个代码片段？将用户输入的 Youtube url 转换为嵌入 url，然后将 iframe src 替换为转换后的 url

Question

我希望用户将他们的 youtube 网址复制并粘贴到输入字段中，单击提交按钮，然后在输入字段上方加载该视频。但是，非嵌入的 youtube 网址在 iframe 中不起作用，因此需要使用此正则表达式进行转换。

我为正则表达式找到的代码：http://jsfiddle.net/88Ms2/296/

此代码适用于两个标签之间的 html，但我想根据用户输入更新 iframe 的 src attr。

我能够使用此脚本将输入值转换为 iframe src，但它使用的是嵌入链接，而不是浏览器顶部的 url。

function getVid(){
    document.getElementById("vidSrc").src = document.getElementById("txtSrc").value;
    return false;
}

我需要以某种方式将两者结合起来，以便当用户将 youtube url 粘贴到文本字段中时，该 url 将转换为带有正则表达式的嵌入代码（如果有必要），然后用该输入替换 iframe src价值。

非常感谢您的任何回复。我是新手，非常感谢这个网站。

Answer 1

使用相同的正则表达式，它看起来像这样：(Updated example)

$('input[type=submit]').click(function () {
    function generate() {
        var input = $('#user_input').val();
        return input.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="420" height="345" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>');
    }
    $('#video').html(generate());
});

或者，这是另一种使用纯 JavaScript 的方法：(example)

document.getElementById('element').onclick = function() {
    function generate() {
        var input = document.getElementById('user_input').value;
        return input.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="420" height="345" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>');
    }
    document.getElementById('video').innerHTML = generate();
}