Browse Source

HW3 + String: youtube

Graf15 2 years ago
parent
commit
d250c9de25
1 changed files with 18 additions and 0 deletions
  1. 18 0
      js/js_03/index.js

+ 18 - 0
js/js_03/index.js

@@ -86,3 +86,21 @@
     let result = str.split('\\n').join('\n');
     alert(result);
 }
+
+//String: youtube
+/* Пусть пользователь введет любой текст с ссылкой на youtube. Используя регулярное выражение извлеките из ссылки идентификатор видоса и создайте строку с встраиваемым блоком HTML. Добавьте блок на страницу.
+объявите константу с регулярным выражением
+используйте метод match, который вернет вам массив
+извлеките из массива элемент с идентификатором видео
+изучите HTML код встраивания видео в страницу на youtube.
+используя интерполяцию строк вклейте идентификатор видео в HTML код встраивания видео
+используя document.write отправьте полученную строку на страницу. */
+
+{
+    const regexp = /(?:https?:)?(?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube(?:\-nocookie)?\.(?:[A-Za-z]{2,4}|[A-Za-z]{2,3}\.[A-Za-z]{2})\/)(?:watch|embed\/|vi?\/)*(?:\?[\w=&]*vi?=)?([^#&\?\/]{11}).*/;
+    let youtubeId = prompt();
+    youtubeId = youtubeId.match(regexp)[1];
+    console.log(youtubeId);
+    let youtubeEmbed = `<iframe width="560" height="315" src="https://www.youtube.com/embed/${youtubeId}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
+    document.write(youtubeEmbed);
+}