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

Помимо этого блога у меня еще есть пара проектов, среди которых есть сайт-каталог с флеш играми – 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, и надеюсь это положительно повлияет на его продвижение.

[Всего голосов: 0    Средний: 0/5]

Добавить комментарий

Ваш e-mail не будет опубликован.