Получить идентификатор видео YouTube из URL с помощью jQuery

Question

Я пытаюсь взять текстовую область, которая принимает любой URL-адрес YouTube, и вставлять видео так же, как это делает 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();

, который принимает любой URL YouTube и превращает его в [youtube=videoid].Проблема тогда состоит в том, что, когда URL представлен с <br> или \n в конце, он добавляет ] впоследствии.

Кто-нибудь знает лучший способ?

Answer 1

Подобный вопрос был недавно задан (но этот вопрос требовал решения PHP). Вот версия 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.

Answer 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'));

Код заимствован у здесь .

Answer 3

Используйте jQuery.trim , чтобы удалить пробелы из переменной ytid

Answer 4

Попробуйте использовать вспомогательный метод синтаксического анализа строки запроса:

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

Вспомогательный метод (заимствовано у здесь ):

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, " "));
}