Поиск ссылок на странице с её известными атрибутами

Иногда необходимо найти ссылку на странице, ведущую на конкретный сайт. Например, можно найти все ссылки, ведущие на w3pro.ru, на следующей странице:

  <body>
    <ul>
      <li><a href="http://jquery.com/">jQuery</a></li>
      <li><a href="http://microsoft.com/">Microsoft</a></li>
      <li><a href="/">W3Pro</a></li>
      <li><a href="http://drupal.org/">Drupal</a></li>
      <li><a href="http://www.w3.org/">W3C</a></li>
      <li><a href="/article">Сатьи на </a></li>
  </body>

Выделить ссылки на контретный сайт можно так:

$("a[href^='http://w3pro.ru']").css({fontWeight: "bold"}); // выделить все ссылки с сайта w3pro

Но это достаточно бесполезный пример, более интересным является поиск внутренних и внешних ссылок на странице. Если создатели сайта и авторы содержимого достаточно образованные в плане сопровождения сайтов люди, то внутренние ссылки обычно указываются со слешем в начале ссылки, например, так "/article" или так "/" (ссылка на главную страницу). Поэтому такие ссылки легко найти:

$("a[href^='/']") // найти все ссылки начинающиеся со слеша

или:

$("a:not([href^='http://'])") // найти все ссылки, не начинающиеся с http:// (внутренние)

Если нужно найти такие ссылки только внутри области с основным содержимым, например, в статье, то можно уточнить селектор:

$("#content [href^='/']") // найти все ссылки начинающиеся со слеша внутри элемента с ID = content

Часто авторы пользуются возможностью запретить индексацию ссылок поисковыми системами и добавляют атрибут rel со значением nofollow. Найти такие ссылки с rel=nofollow или наоборот без него можно таким образом:

$("a[rel*='nofollow']") // найти все ссылки c rel=nofollow
$("a:not([rel*='nofollow'])") // найти все ссылки без rel=nofollow

Если есть необходимость, можно как-то выделить ссылки, которые будут открыты в новом окне, то есть с target=_blank:

$("a[target='_blank']") // найти все ссылки, по умолчанию открывающиеся в новом окне или вкладке

Такой подход к поиску элементов на странице с определенными атрибутами может пригодится во многих случаях и предоставляемых jQuery-селекторов вполне достаточно для этих целей. Подробнее о поиске элементов по атрибутам читайте в разделе Селекторы атрибутов.

Поиск ссылок на странице с её известными атрибутами

Комментарии