Question

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

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

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

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

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();
}

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

1 个答案: