Мобильная
версия

Поиск изображений без атрибута.

Дата: Категория: Регулярные выражения

Помимо этого блога у меня еще есть пара проектов, среди которых есть сайт-каталог с флеш играми - flashpl.ru. И вот, однажды, наткнувшись на один заморский сайт по проверке сайтов на валидность для seo, я решил вбить его туда. 

Первое на что я обратил внимание - отсутствие у некоторых изображений атрибута alt.

Для начала - что это вообще за атрибут?

Атрибут alt - альтернативное описание изображения. Например если изображения в браузере отключены, или они просто не погрузились, то это описание будет вместо картинки. И, как везде пишут, что "в наш век поисковики не научились распознавать картинки..." - чушь. Гиганты уже давно умеют распознавать изображения, но изображение дополненное текстом лишним не будет. Поэтому я решил добавить везде этот, в принципе, необязательный атрибут.

Сделав поиск по проекту по маске <img я нашел порядка 200 вхождений, среди которых были как и с alt, так и без него.

Так как я человек ленивый, и мне не охота выбирать из всех 200 вариантов нужные мне, я решил это сделать с помощью своего любимого инструмента - регулярных выражений.

Я не буду писать по шагам как я его писал, я всего лишь расскажу как оно работает.

Собственно, вот оно

<img(\s+(?!alt)([^=>]*?)=((('|")([^=>]*?)\5)|([^\s>"']*)))+\s*\/?>

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

А теперь как оно работает.

Как видите - оно делится на несколько частей

  1. <img - собственно то, с чего начинается любое изображение.
  2. (\s+(?!alt)([^=>]*?)=((('|")([^=>]*?)\5)|([^\s>"']*)))+ - об этом ниже подробнее (плюсик в конце указывает что таких скобок может быть 1 или больше)
  3. \s*\/?> - Конечная конструкция - сколько угодно пробелов, а после либо > либо />

Если первая и 3 части не вызывают непонимания, то о 2 такого сказать нельзя.

Для начала разложим ее еще на несколько частей

  1. (?!alt)([^=>]*?)
  2. ((('|")([^=>]*?)\5)|([^\s>"']*))

И получим - (\s+ #1 = #2)+
Как видите - все просто. Вначале 1 или более пробелов, после атрибут, а после его значение.

Разберемся вначале со значением - там 2 условия, разделенные ИЛИ (|)

  1. (('|")([^=>]*?)\5) - тут мы ищем одинарную кавычку или двойную, потом жадный поиск (все кроме равно и закрывающей скобки. О том, почему все кроме равно, ниже), а после совпадение №5 (одинарная или двойная кавычка)
  2. ([^\s>"']*) - а тут мы ищем все что угодно кроме кавычек, закрывающего знака, и пробелов.

Тут нужно немного пояснить. Записи могут быть двух видов. С кавычками (внутри все кроме открывающей кавычки - вариант 1), и без (внутри все кроме пробелов - вариант 2)

Отлично - значение атрибута мы вычленили, теперь займемся его названием - (?!alt)([^=>]*?)

Первая скобка - негативный просмотр вперед. То есть под условие попадают все атрибуты, которые не alt. 

После идет жадный поиск, который включает в себя все кроме равно и закрывающей скобки. Почему именно так, а не просто жадный поиск? Потому что если атрибут alt будет стоять не первым, например

<img src="img.png" alt="Изображение" />

То под эту маску - (?!alt)(.*?) попадает "img.png" alt="Изображение". Если использовать все кроме равно, то все будет хорошо.

А если перед этой строкой идет еще одна строка с изображением без атрибута alt, то под нее попадет

<img src="123" title="123" />
<img alt="123" id="123" />

Что не слишком хорошо.

Потестировать и поиграться с выражением вы можете здесь

Да, я убил на эту регулярку 2 часа, и да, я знаю, что быстрее 200 изображений прошерстить руками, но не могу я ничего с собой поделать, когда есть задача, которую можно решить с помощью регулярных выражений.

И теперь на моем портале у каждой картинки есть атрибут alt, и надеюсь это положительно повлияет на его продвижение.

Теги: #Регулярные выражения

Ваша оценка:

Рейтинг: 10.0 (Оценок: 2)

Комментарий:

Copyright © DOC_tr 2015-2017 г. Все права защищены
Яндекс.Метрика
Перейти к мобильной версии