В чем проблема регулярного выражения?

Question

[steef08]

Есть вот это выражение

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

поиск id ютуба идет по ссылке картинки. Я делаю, чтобы выражение искало по стандартной ссылке https://youtu.be/KkcrQTqr9q4
вот так -

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

но он не работает. В чем ошибка

Answer 1

[sergski]

В коде вы получаете элемент video__media присваиваете его в переменную media, а потом пишетеlet url = media.src;. Видимо, это ifram, и тут ошибка, получить значение в src нужно так: let url = media.getAttribute('src'); должно заработать

Comments

[steef08]

Вот полный код

<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:\/\/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();

</script>

[sergski]

steef08, это я видел выше, еще html покажите

[steef08]

sergski,

<div class="video" >
  <!-- ВСТАВКА iD ВИДЕО -->  
<a class="video__link" href="https://youtu.be/KkcrQTqr9q4">
    <picture>
<source srcset="/wp-content/uploads/2020/10/maxresdefault-3.webp" type="image/webp">
<img class="video__media" src="/wp-content/uploads/2020/10/maxresdefault-3.webp" type="image/jpg">
</picture>
</a>
<!-- ВСТАВКА iD ВИДЕО -->
        <button class="video__button" aria-label="Запустить видео">
            <svg width="68" height="48" viewBox="0 0 68 48"><path class="video__button-shape" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path class="video__button-icon" d="M 45,24 27,14 27,34"></path></svg>
        </button>
    </div>
</div>
</div>

[steef08]

sergski, link.removeAttribute('href');
удаляю, так как это вроде на этапе подготовки видео удаляется?

[steef08]

sergski,

https://github.com/pepelsbey/playground/tree/master/12

Вдохновился идеей здесь, а по умственному развитию, увы не дотягиваю, прошу не пинать, я учусь и хочу разбираться.

[sergski]

steef08, у вас сейчас в video__media

<img class="video__media" src="/wp-content/uploads/2020/10/maxresdefault-3.webp" type="image/jpg">

, если взять аттрибут src и применяете к нему regexp, конечно у вас тут ошибка

[steef08]

sergski, Вы гений! С вашей помощью я понял что все это время скрипт искал ссылку не по тому адресу! Я заменил ссылку на видео и заработало!!! Как я могу отблагодарить вас!? =)

[sergski]

steef08, Спасибо) В разработке и не такое бывает.) Отметили решением и норм. Удачи!)

[steef08]

sergski, Еще раз огромное Душевное Спасибо!!! Вам тоже Удачи!)))

Answer 2

[Rsa97]

Вы заэскейпили открывающую скобку и она из служебного символа начала группы превратилась в обычный символ выражения.

Comments

[steef08]

у меня уже мозги вытекают, как собрать это выражение правильно? Заранее благодарю.

[Rsa97]

steef08, /https:\/\/youtu\.be\/([a-zA-Z0-9_-]+)/

[steef08]

Rsa97, не работает =(
Правильно?

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

[Rsa97]

steef08, Должно работать, https://regex101.com/r/b9tOg7/1

[steef08]

Rsa97, вот полный код

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