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

Posted 2023-02-24

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

【英文标题】：Combining two code snippets? Convert user input Youtube url to embed url and then replace iframe src with converted url

【发布时间】：2014-01-21 11:37:10

【问题描述】：

我希望用户将他们的 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价值。

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

【参考方案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   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   src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>');
    
    document.getElementById('video').innerHTML = generate();

【讨论】：

这很好用！我最终使用了 jQuery 代码，并将 iframe 的高度和宽度更改为 100%，因为我将它合并到 Bootstrap 中，因此它具有响应性。非常感谢