Что касается программирования, можно сказать, что повторение — мать изобретения.
Когда одни и те же задачи возникают снова и снова, я всегда спрашиваю: как я могу заставить машину сделать это за меня? Компьютеры послушны, неутомимы и послушны. Я нетерпелив, непоследователен и порывист. Но это значит, что компьютеры скучны, а я нет.
Автоматизация не одержима тем, чтобы отнимать рабочие места у трудолюбивых людей и возвещать какой-то антиутопический апокалипсис яппи.
На мой взгляд, устранение повторений освобождает меня для более спонтанных и творческих действий. И найти способ автоматизировать процесс — это первое творческое действие, которое я могу выполнить.
Так или иначе, пятница, полдень. После обеда мне поручили восстановить новый сайт. Прежде чем сделать это, мне нужно удалить все копии и ресурсы со старого сайта. Все было хорошо и хорошо. Пока дело не дошло до тегов alt…
Теперь одно дело скопировать и вставить кучу текста с сайта. Вы можете нажать ⌘ + A прямо сейчас и получить всю эту статью, если хотите. Но эти эфемерные теги alt показывают себя только когда вы наводите курсор на ссылку.
Эти скрытые существа становятся еще более иллюзорными, когда вы замечаете, что инфографика, на которую были сопоставлены эти area элементы, больше не существует.
Так вот, я бесцельно таскал курсор по бесплодной полосе пикселей, когда время от времени всплывал дурацкий крот текста, но исчезал так же быстро, как и появлялся. Мой бедный курсор получил удар по лицу от противника, всегда находящегося на периферии.
Итак, я открыл свой инспектор, скопировал весь элемент из разметки и поместил его в свой редактор, где я могу возиться с вещами. В общем, скопировать и вставить текст alt из тех мест, где их легко найти, не составит труда. Как здесь:
Но иногда они немного теряются в миксе:
И когда вы понимаете, что в этом одном блоке кода отдыхает более пятидесяти этих маленьких парней, мой разум начинает блуждать в поисках того, как лучше провести время… слушая плеск волн о берег… вдыхая доносящийся от него аромат. свежеиспеченные булочки… первый глоток коктейля в счастливый час с друзьями… Я упоминал, что сегодня пятница?
Так или иначе. Вы всегда можете написать регулярное выражение, чтобы захватить весь текст, который идет после alt=" и до тех пор, пока он не дойдет до " coords. Я имею в виду, вы могли бы, если вы один из тех людей, для которых что-то вроде \b(\w)?(\w)\w?\2\1 или ?:#|0x)?(?:[0-9A-F]{2}){3,4} имеет смысл.
Однако, если вы такой же человек, как я, для которого обмотки или египетские иероглифы обычно имеют больше смысла, чем регулярное выражение, вы можете попробовать что-то другое. Вот почему я сделал это вместо этого:
Как фронтенд-разработчик, не проходит и дня, чтобы я не спросил себя: «Зачем делать что-то самому, если я могу заставить JavaScript делать это за меня?»
В каком-то смысле я Берти Вустер, а JavaScript — мой Дживс, который добросовестно выполняет любое поручение — разумное или нелепое, — которое ему могут поручить мои прихоти. И в подобных случаях jQuery просто сглаживает этот скользкий путь до закона Этвуда.
Так все же, как это работает?
1.jQuery('<div class="copy-box" style="..."></div>').prependTo('body');
Сначала скрипт создает div с именем .copy-box и помещает его прямо под открывающим тегом вашего body. Затем следует ужасная строка встроенных стилей, которые вы можете редактировать в соответствии со страницей, на которой вы находитесь, но, по сути, это создает поле, которое парит над всем на странице. Вся копия, которую вы пытаетесь очистить, будет помещена в него.
2.jQuery('parent_of your_element').each(function(){ ...
Во-вторых, скрипт перебирает каждый из выбранных вами элементов. В моем случае это были все area элементов в map. Для каждого из этих элементов он берет строку из атрибута alt и сохраняет ее в переменной с именем text.
Не стесняйтесь менять эту часть в зависимости от того, что вы пытаетесь очистить. Вы можете выбрать другой атрибут (например, src, href, style и т. д.). Если вам нужен только текст элемента, вы также можете заменить .attr('your-attribute'); на .text();. (Но опять же, ⌘ + A неплохо поработали ранее в этой статье, не так ли?)
3.jQuery('<p>'+text+'</p>').appendTo('.copy-box');
Наконец, сценарий берет копию, хранящуюся в text, и помещает ее как элемент абзаца в тот .copy-box, который мы создали в начале.
Теперь вы должны увидеть что-то вроде этого:
И вот мы идем. Четыре строчки кода спустя, и я на пути к счастливому часу.
С небольшими изменениями этот код разорвал все, что мне нужно. Я использовал .attr('alt');, чтобы получить текст alt. jQuery('p').text(); Я получил все нормальные копии, которые мне не хотелось ловить. Чтобы получить все URL-адреса изображений, которые мне нужно было загрузить, jQuery('img').attr('src'); проделал отличную работу. И, соединив .text(); с .attr('href’); через небольшую конкатенацию, я получил пары текста и ссылок на каждый a элемент на странице. Я даже подумывал использовать это, чтобы узнать все классы и идентификаторы, используемые на каждой странице…
Но я оставлю это на ваше усмотрение.
Вот код. Поместите его в консоль вашего инспектора. Настройте его так, как вам нужно. Наслаждайся своими выходными:
Бонус: обратите внимание, что в последних строках этого описания я добавляю тег привязки .delete-copy-box к вашему блоку, поэтому, когда вы закончите прикреплять свою копию, вы можете избавиться от этого блока и перейти к чему-то другому.
