Используйте несколько строк JavaScript для извлечения всех гиперссылок на веб-странице, среда кодирования не требуется
Извлечение и очистка данных с веб-сайтов и документов - это мой хлеб с маслом, и мне очень понравилось учиться систематически извлекать данные с нескольких веб-страниц и даже с нескольких веб-сайтов с помощью Python и R. Но иногда проекту требуется лишь небольшой объем данных из всего одна страница на сайте.
Раньше, когда возникал подобный случай, я все равно запускал свою Python IDE или RStudio, писал и выполнял скрипт для извлечения этой информации. Это кувалда, чтобы расколоть орех. Обычный старый JavaScript достаточно мощный, чтобы извлекать информацию с одной веб-страницы, и этот JavaScript можно запустить в консоли разработчика браузера.
В этом примере я извлекаю все ссылки с веб-страницы, так как это задача, которую я регулярно выполняю на веб-страницах. Однако этот код будет одинаково хорошо работать для извлечения любых других типов текстовых элементов в HTML-документах с небольшими изменениями. Когда этот код запускается, он открывает новую вкладку в браузере и выводит таблицу, содержащую текст каждой гиперссылки и саму ссылку, поэтому есть некоторый контекст того, на что указывает каждая ссылка.
Что вам понадобится для этого проекта:
- Буквально любой браузер, сделанный за последние 10 лет.
- Кусок кода, который я приведу ниже.
- Вот и все!
Код и как он работает
Откройте браузер (да, это работает даже в Internet Explorer, если вы обожаете наказания) и перейдите на страницу, с которой вы хотите извлечь ссылки.
В качестве примера я использую страницу Список запросов избранного комитета из парламента 2017 года - это страница с огромным количеством ссылок, которые в совокупности могут быть полезны многим людям.
Теперь нам просто нужно открыть консоль разработчика и запустить код. Чтобы открыть консоль разработчика, вы можете нажать F12 или щелкнуть страницу правой кнопкой мыши и выбрать «Проверить» или «Проверить элемент» в зависимости от выбранного браузера. Это откроет консоль, в которую вы можете ввести или скопировать и вставить фрагменты кода.
Это фрагмент кода, который вам нужно будет поместить в консоль:
var x = document.querySelectorAll("a");
var myarray = []
for (var i=0; i<x.length; i++){
var nametext = x[i].textContent;
var cleantext = nametext.replace(/\s+/g, ' ').trim();
var cleanlink = x[i].href;
myarray.push([cleantext,cleanlink]);
};
function make_table() {
var table = '<table><thead><th>Name</th><th>Links</th></thead><tbody>';
for (var i=0; i<myarray.length; i++) {
table += '<tr><td>'+ myarray[i][0] + '</td><td>'+myarray[i][1]+'</td></tr>';
};
var w = window.open("");
w.document.write(table);
}
make_table()
Затем просто нажмите Enter (или кнопку запуска в IE. Но почему вы используете IE ?!). В вашем браузере откроется новая вкладка с таблицей, содержащей весь текст ссылки и гиперссылки с выбранной вами веб-страницы.
Затем эту таблицу можно скопировать и вставить в электронную таблицу или документ, чтобы использовать их по своему усмотрению.
Что делает код?
Вот разбивка кода и то, что делает каждый аспект.
var x = document.querySelectorAll("a");
var myarray = []
Здесь мы находим все элементы «a» на странице (элементы a - это ссылки) и присваиваем их переменной x. Затем мы создаем переменную массива, но пока оставляем ее пустой.
for (var i=0; i<x.length; i++){
var nametext = x[i].textContent;
var cleantext = nametext.replace(/\s+/g, ' ').trim();
var cleanlink = x[i].href;
myarray.push([cleantext,cleanlink]);
};
Затем мы перебираем все элементы «a» в x, и для каждого элемента мы пытаемся найти текстовое содержимое элемента и ссылки.
Для текстового содержимого мы заменяем пробелы одиночными пробелами и обрезаем текст, так как могут быть большие участки пробелов, которые сделают нашу таблицу нечитаемой.
function make_table() {
var table = '<table><thead><th>Name</th><th>Links</th></thead><tbody>';
for (var i=0; i<myarray.length; i++) {
table += '<tr><td>'+ myarray[i][0] + '</td><td>'+myarray[i][1]+'</td></tr>';
};
var w = window.open("");
w.document.write(table);
}
make_table()
Затем мы создаем таблицу с помощью функции «make_table ()». Это создает переменную table с началом таблицы HTML и заголовками таблиц. Затем мы используем цикл for для добавления строк таблицы, содержащих текст ссылки и гиперссылки.
Затем мы открываем новое окно с помощью «window.open ()» и записываем HTML-таблицу в это окно с помощью «document.write ()».
Но что насчет…?
У текущего кода есть недостаток - он займет ВСЕ ссылки на странице. Это означает все ссылки в меню, любые ссылки перехода, которые ведут к различным точкам на текущей странице, контакт, Условия и условия, ссылки на карту сайта в основании страницы и т. Д.
Вы можете быть более конкретными и искать все элементы «а» в определенной области веб-страницы. В случае со страницей запросов комитета, приведенной выше, нам просто нужно изменить первую строку кода, чтобы querySelector смотрел на определенную область страницы - возможно, только на список a-z в центре страницы.
Для этого щелкните правой кнопкой мыши область страницы, с которой вы хотите перейти по ссылкам, и нажмите «Проверить». После этого вы сможете увидеть, как называется этот элемент страницы. В этом случае элементом является «div» с классом «листинг от а до я». Мы можем просто изменить первую строку, чтобы искать все элементы «a» в элементе с классом «a-to-z -isting»:
var x = document.querySelectorAll(".a-to-z-listing a");
Я по-прежнему собираюсь использовать Python и R в подавляющем большинстве своих действий по парсингу, но полезно иметь быстрый и простой способ извлечения информации с веб-страницы без необходимости открывать какие-либо другие приложения.
Для чего бы вы использовали этот код? Есть ли более элегантный способ построить этот код? Пожалуйста, дайте мне знать в ответах ниже.
