JavaScript | Как получить все ссылки на скрипты?

JavaScript | Как получить все ссылки на скрипты?

Одной командой

document.write((((Array.from(document.getElementsByTagName("script"))).map(i => {return i.src}))).join("<br>"))
Получение всех ссылок на скрипты при помощи JavaScript и консоли браузера
Получение всех ссылок на скрипты при помощи JavaScript и консоли браузера

Куда вводить эту команду? Открываете HTML-страницу, с которой хотите получить все ссылки. Включаете «Инструменты разработчика» в браузере (CTRL + SHIFT + i). Находите вкладку «Console«. Тыкаете курсор в белое поле справа от синей стрелочки. Вставляете команду. Жмёте ENTER.

Для тех кто не понял длинную строчку кода выше, предлагаю упрощённую для понимания версию. Пошаговая инструкция ниже.

 

Практика решения задачи

Для начала получим все элементы script на HTML-странице. Используем метод getElementsByTagName(), интерфейса Document, стандарта DOM.

var a = document.getElementsByTagName("script")

Вывод в консоль браузера:

HTML-коллекция элементов script - JavaScript
HTML-коллекция элементов script — JavaScript

Перегоним коллекцию в массив. Обратимся к свойству from() конструктора Array.

var b = Array.from(a)

Вывод в консоль браузера:

Массив элементов script - JavaScript
Массив элементов script — JavaScript

Определим где элементы script хранят свои ссылки на файл. В нашем случае это ключ src.

Ключ src для отлова ссылки на файл скрипта - JavaScript
Ключ src для отлова ссылки на файл скрипта — JavaScript

 

Вытащим из каждого элемента script ключи src. Воспользуемся методом map() прототипов Array.

var c = b.map(i => {return i.src})

Вывод в консоль браузера:

Массив из значений ключа src элементов script - JavaScript
Массив из значений ключа src элементов script — JavaScript

Соединим все элементы массива в одну строку.

var d = c.join("<br>")

Вывод в консоль браузера:

Строка из ссылок на скрипты - JavaScript
Строка из ссылок на скрипты — JavaScript

Выведем ссылки в текущий документ:

document.write(d)

Вывод в консоль браузера и на страницу:

Вывод ссылок на скрипты в документ - JavaScript
Вывод ссылок на скрипты в документ — JavaScript

Итог

В списках могут быть пустые значения ключа src для элемента script. Это значит, что код скрипта прописан напрямую в HTML-документе, а не ссылается на какой-либо файл. Их необходимо фильтровать и выводить очищенные данные.

Пример такого элемента script:

Элемент script с кодом в HTML-документе - JavaScript
Элемент script с кодом в HTML-документе — JavaScript

Для получения кода скрипта нужно будет обращаться к ключам text и textContent:

Ключи text и textcontent - JavaScript
Ключи text и textcontent — JavaScript

 

Ссылки

JavaScript | Как получить список каких-либо HTML-элементов из документа?

JavaScript | Как получить все ссылки на HTML-странице?

JavaScript | Как получить все внешние ссылки на HTML-странице?

JavaScript | Как получить все внутренние ссылки на HTML-странице?

JavaScript | Массивы (Array)

JavaScript | Объявление массива через квадратные скобки []

ECMAScriptLiving Standardhttps://tc39.es/ecma262/#sec-array-objects

ECMAScriptLiving Standardhttps://tc39.es/ecma262/#sec-array.from

Свойства конструктора Array

Свойства объекта прототипа Array