Как изменить regexp?

Question

[steef08]

Добрый вечер! Нашел для своего проекта код который ищет по регекспу id видео ютуба и вставляет в определенное место этот отрывок.

function parseMediaURL(media) {
    let regexp = /https:\/\/i\.ytimg\.com\/vi\/([a-zA-Z0-9_-]+)\/maxresdefault\.jpg/i;
    let url = media.src;
    let match = url.match(regexp);

    return match[1];
}

из вот этой ссылки

https://i.ytimg.com/vi/neHA4MJwpnY/maxresdefault.jpg

Как сделать, чтобы он находил id из любой ссылки, а не id из пути картинки.
Например из вот такой ссылки https://youtu.be/KkcrQTqr9q4

Answer 1

[Stalker_RED]

Вот пара регулярок, которые разбирают все известные мне ссылки jsfiddle.net/1j5do56g/1

Comments

[steef08]

Бро трабл в том, что я уже потыкал этот код как только не мог.... я не понимаю, что изменить требуется в этих палочках, чтобы все заработало. Буду очень благодарен, если ты напишешь, так как я не понимаю в java от слова совсем(

[Stalker_RED]

steef08, дык оно разбирает вашу строку. И это не java.

[steef08]

Stalker_RED,

function findVideos() {
    let videos = document.querySelectorAll('.video');

    for (let i = 0; i < videos.length; i++) {
        setupVideo(videos[i]);
    }
}

function setupVideo(video) {
    let link = video.querySelector('.video__link');
    let media = video.querySelector('.video__media');
    let button = video.querySelector('.video__button');
    let id = parseMediaURL(media);

    video.addEventListener('click', () => {
        let iframe = createIframe(id);

        link.remove();
        button.remove();
        video.appendChild(iframe);
    });

    link.removeAttribute('href');
    video.classList.add('video--enabled');
}

function parseMediaURL(media) {
    let regexp = /https:\/\/i\.ytimg\.com\/vi\/([a-zA-Z0-9_-]+)\/maxresdefault\.jpg/i;
    let url = media.src;
    let match = url.match(regexp);

    return match[1];
}

function createIframe(id) {
    let iframe = document.createElement('iframe');

    iframe.setAttribute('allowfullscreen', '');
    iframe.setAttribute('allow', 'autoplay');
    iframe.setAttribute('src', generateURL(id));
    iframe.classList.add('video__media');

    return iframe;
}

function generateURL(id) {
    let query = '?rel=0&showinfo=0&autoplay=1';

    return 'https://www.youtube.com/embed/' + id + query;
}

findVideos();

Вот весь код, который я использую, мне нужно чтобы он вытащил этот id из ссылки https://youtu.be/KkcrQTqr9q4 , а не из ссылки картинки

[Stalker_RED]

steef08, я тебе дал функцию, внутри которой две регулярки. Если не сработала одна - выполняется другая.
Они разбирают все известные мне ссылки на ютуб, и даже iframe и object с ютубом.
Твои ссылки оно тоже нормально обрабатывает. Обе.

[steef08]

Я увидел, что ты дал код, я правильно понимаю что под этот код мне нужно будет весь свой код переписывать? Я же прошу помочь, т.к не разбираюсь в этом. Давно бы можно было исправить строку кода, а не писать 5 том войны и мира.

[Stalker_RED]

steef08, неправильно понимаешь.

[Роман]

steef08, вы не в регулярках не разбираетесь, вы в программировании не разбираетесь от слова совсем!!

спойлер

просто у себя замените это

function parseMediaURL(media) {
    let regexp = /https:\/\/i\.ytimg\.com\/vi\/([a-zA-Z0-9_-]+)\/maxresdefault\.jpg/i;
    let url = media.src;
    let match = url.match(regexp);

    return match[1];
}

на это

function youtubeGetID(input){
    var r = input.replace(/(>|<)/gi,'').split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/)
    if(r[2] !== undefined) {
        return r[2].split(/[^0-9a-z_\-]/i)[0]
    } else {
        r = input.match(/^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/)
        if(r && r[1] !== undefined) {
            return r[1]
        }
        else return input
    }
}

а в остальном коде, везде где вы использовали parseMediaURL(mediaю), замените на youtubeGetID(media.src).

И не забудте сказать спасибо @Stalker_RED

[Stalker_RED]

Роман, можно не заменять везде где вы использовали, а переименовать функцию youtubeGetID

[Роман]

Stalker_RED, можно и переименовать, но тогда получение url из media опять надо в фанку заносить

[steef08]

Роман, Не работает =(

function findVideos() {
    let videos = document.querySelectorAll('.video');

    for (let i = 0; i < videos.length; i++) {
        setupVideo(videos[i]);
    }
}

function setupVideo(video) {
    let link = video.querySelector('.video__link');
    let media = video.querySelector('.video__media');
    let button = video.querySelector('.video__button');
    let id = youtubeGetID(media.src);

    video.addEventListener('click', () => {
        let iframe = createIframe(id);

        link.remove();
        button.remove();
        video.appendChild(iframe);
    });

    link.removeAttribute('href');
    video.classList.add('video--enabled');
}

function youtubeGetID(input){
    var r = input.replace(/(>|<)/gi,'').split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/)
    if(r[2] !== undefined) {
        return r[2].split(/[^0-9a-z_\-]/i)[0]
    } else {
        r = input.match(/^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/)
        if(r && r[1] !== undefined) {
            return r[1]
        }
        else return input
    }
}

function createIframe(id) {
    let iframe = document.createElement('iframe');

    iframe.setAttribute('allowfullscreen', '');
    iframe.setAttribute('allow', 'autoplay');
    iframe.setAttribute('src', generateURL(id));
    iframe.classList.add('video__media');

    return iframe;
}

function generateURL(id) {
    let query = '?rel=0&showinfo=0&autoplay=1';

    return 'https://www.youtube.com/embed/' + id + query;
}

findVideos();

[Роман]

steef08, и что выдает вместо id в тех случаях когда не работает?

let id = youtubeGetID(media.src);
console.log(id); // скопируй вывод с консоли

[steef08]

Роман, Мне помогли -

let regexp = /https:\/\/youtu\.be\/([a-zA-Z0-9_-]+)/;

Но не работает почему-то, можете сказать в чем проблема пожалуйста?

вот весь код

<script>

function findVideos() {
    let videos = document.querySelectorAll('.video');

    for (let i = 0; i < videos.length; i++) {
        setupVideo(videos[i]);
    }
}

function setupVideo(video) {
    let link = video.querySelector('.video__link');
    let media = video.querySelector('.video__media');
    let button = video.querySelector('.video__button');
    let id = parseMediaURL(media);

    video.addEventListener('click', () => {
        let iframe = createIframe(id);

        link.remove();
        button.remove();
        video.appendChild(iframe);
    });

    link.removeAttribute('href');
    video.classList.add('video--enabled');
}

function parseMediaURL(media) {
    let regexp = /https:\/\/youtu\.be\/([a-zA-Z0-9_-]+)/;
    let url = media.src;
    let match = url.match(regexp);

    return match[1];
}

function createIframe(id) {
    let iframe = document.createElement('iframe');

    iframe.setAttribute('allowfullscreen', '');
    iframe.setAttribute('allow', 'autoplay');
    iframe.setAttribute('src', generateURL(id));
    iframe.classList.add('video__media');

    return iframe;
}

function generateURL(id) {
    let query = '?rel=0&showinfo=0&autoplay=1';

    return 'https://www.youtube.com/embed/' + id + query;
}

findVideos();

</script>

[Роман]

steef08, поместите весь ваш код (html, css, js) в песочницу (https://jsfiddle.net/ или https://codepen.io/) и скиньте ссылку, тогда я посмотрю и подскажу (самому создавать рабочий аналог в песочнице мне лень)

[steef08]

Роман, Мне помог sergski . Нашли проблему в том, что в Html был задан путь на картинку, а скрипт искал ссылку видео. Вам тоже Огромное спасибо за помощь!

[Stalker_RED]

steef08, то есть у вас ошибка в каком-то другом коде, который вы вообще в вопросе не показали, а потом "мне помог другой юзернейм". Это вообще-то сервис вопросов и ответов, а не помощи.

[steef08]

Stalker_RED,
Изначальный вопрос был как поменять

/https:\/\/i\.ytimg\.com\/vi\/([a-zA-Z0-9_-]+)\/maxresdefault\.jpg/i

на поиск id ссылки. Ты разве ответил на вопрос?! Нет.

А вот sergski дал ответ не только как изменить этот отрывок кода /https:\/\/youtu\.be\/([a-zA-Z0-9_-]+)/, но еще и сообразил, что проблема существует в let url = media.src; и в html ссылки. Человек заинтересован был дать настоящий ответ, за что я его отблагодарил!

Это вообще-то сервис вопросов и ответов, а не помощи.

А разве, когда человек обращается с вопросом, это не знак того что он нуждается в помощи умник?!

[Stalker_RED]

steef08,
Перечитай еще раз свой вопрос. Ты там просишь переделать регексп, чтобы он корректно обрабатывал ссылки, и ты приводишь два примера. Так вот, они ОБА корректно обрабатываются той штукой, что я тебе дал (тыц).

Более того, эта функция может разобрать еще кучу других вариантов, ты их можешь посмотреть по ссылке в первом моем сообщении. Она извлекает youtubeId из практически любой строки, которую ты туда передашь. Вот реально, я не знаю ни одной ссылки которую распознавал бы ютуб, но при этом не срабатывала эта функция.

Это конечно не совсем ответ на вопрос "как переделать", а скорее "чем заменить", потому что с переделкой все сложно. В учебниках по регуляркам не просто так сотни страниц.

Answer 2

[Антон Шаманов]

капитан очевидность подсказывает что vi\ это не виндетта)))