使用 jQuery 从 URL 获取 YouTube 视频 ID

Posted 2023-02-22

【中文标题】使用 jQuery 从 URL 获取 YouTube 视频 ID

【英文标题】：Get YouTube video id from URL with jQuery

【发布时间】：2011-07-22 17:33:56

【问题描述】：

我正在尝试采用 textarea 输入，该输入将任何 YouTube URL 作为输入并像 Facebook 一样嵌入视频。

我有：

var text = $('#content').val().split(' ');
    for (i = 0; i < text.length; i++) 
        var test = text[i].indexOf('youtube.com/watch');
        var check = text[i].indexOf('[youtube=');

        if (test != -1 && check == -1) 
            var ytid = text[i].substring(text[i].lastIndexOf('=') + 1);
            text[i] = '[youtube=' + ytid + ']';
        
    
var boxval = text.join(' ').trim();

它采用任何 YouTube URL 并将其转换为 [youtube=videoid]。那么问题是，当 URL 提交时带有 <br> 或 \n 最后它会添加 ] 。

有人知道更好的方法吗？

【问题讨论】：

你的问题不完整我认为“然后我使用.....”

您的逻辑不适用于 http://www.youtube.com/watch?v=gzDS-Kfd5XQ&feature=youtube_gdata_player 等 URL，尽管它是合法的 YouTube 视频 URL。

【参考方案1】：

最近有人问了一个类似的问题（但该问题需要 php 解决方案）。这是 my solution to that question 的 javascript 版本：

// Linkify youtube URLs which are not already links.
function linkifyYouTubeURLs(text) 
    /* Commented regex (in PHP syntax)
    $text = preg_replace('%
        # Match any youtube URL in the wild.
        (?:https?://)?   # Optional scheme. Either http or https
        (?:www\.)?       # Optional www subdomain
        (?:              # Group host alternatives
          youtu\.be/     # Either youtu.be,
        | youtube\.com   # or youtube.com
          (?:            # Group path alternatives
            /embed/      # Either /embed/
          | /v/          # or /v/
          | /watch\?v=   # or /watch\?v=
          )              # End path alternatives.
        )                # End host alternatives.
        ([\w\-]10,12)  # $1: Allow 10-12 for 11 char youtube id.
        \b               # Anchor end to word boundary.
        [?=&\w]*         # Consume any URL (query) remainder.
        (?!              # But don\'t match URLs already linked.
          [\'"][^<>]*>   # Not inside a start tag,
        | </a>           # or <a> element text contents.
        )                # End negative lookahead assertion.
        %ix', 
        '<a href="http://www.youtube.com/watch?v=$1">YouTube link: $1</a>',
        $text);
    */
    // Here is the same regex in JavaScript literal regexp syntax:
    return text.replace(
        /(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com(?:\/embed\/|\/v\/|\/watch\?v=))([\w\-]10,12)\b[?=&\w]*(?!['"][^<>]*>|<\/a>)/ig,
        '<a href="http://www.youtube.com/watch?v=$1">YouTube link: $1</a>');

您可以轻松修改替换字符串以转换为 BBCode 而不是 html。

【参考方案2】：

正则表达式的救援：

var text = (
"http://www.youtube.com/watch?v=gzDS-Kfd5XQ\n" +
"http://www.youtube.com/watch?v=gzDS-Kfd5XQ&feature=youtube_gdata_player\n" +
"http://www.youtube.com/watch?feature=youtube_gdata_player&v=gzDS-Kfd5XQ\n" +
"http://www.youtube.com/watch?v=gzDS-Kfd5XQ http://www.youtube.com/watch?v=gzDS-Kfd5XQ"
).split(/\s+/);
for (var i = 0; i < text.length; i++) 
    var url = text[i];
    if (/^https?\:\/\/.+/i.test(url)) 
        var temp = /[\?\&]v=([^\?\&]+)/.exec(url);
        if (temp) 
            text[i] = '[youtube=' + temp[1] + ']';
         else 
            text[i] = "URL found but does not contain video id";
        
     else 
        // other case left as an exercise
    

alert(text.join('\n'));

从here借来的代码。

【参考方案3】：

使用jQuery.trim 去除ytid 变量中的空格

【参考方案4】：

尝试使用查询字符串解析辅助方法：

var boxval = getParameterByName("v", $('#content').val());

Helper方法（借自here）：

function getParameterByName(name, url)

  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(url);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));