Как узнать, что ссылка ведет на картинку на своем домене?

Question

[HelpSophie]

Задача подключить fancybox ко всем картинкам на сайте.

Для этого нужно
1. найти картинки у которых обертка не ссылка, и обернуть в ссылку.
тут нет проблем

2. если картинка уже обернута в ссылку, то нужно определить, что это ссылка на картинку, причем на картинку на своем домене. И тогда добавить только data-

$('.content-block img').each(function () {
    var $parent = $(this).parent();
//если родитель ссылка и это ссылка на картинку, то добавляем только data-
    if ($parent[0].tagName == "A" && $parent.attr("href").indexOf(".jpg") + 1 > 0) {
      $parent.attr('data-fancybox', 'gallery');
    }
}

Для jpg ОК.
Но картинки могут быть jpg, png, gif, webp.
Не писать же 4 условия?
Так

$parent.attr("href").indexOf(".jpg|.gif|.png|.webp") + 1 > 0

не работает
И как определить, что это не внешняя ссылка?

Answer 1

[Антон Спирин]

Не писать же 4 условия?

Можно использовать регулярное выражение:

if ($parent[0].tagName == 'A' && (/\.(gif|jpg|webp|png)$/i).test($parent.attr('href'))) {
  // do something
}

И как определить, что это не внешняя ссылка?

function getDomain(url) {
  return url.replace('http://','').replace('https://','').split('/')[0];
}

function isExternal(url) {
  return getDomain(location.href) !== getDomain(url);
}

if (isExternal($parent.attr('href')) {
  // do something
}

Comments

[HelpSophie]

А если сайт доступен по нескольким доменам?

[Антон Спирин]

HelpSophie, ну можно, например, так:

var domainsList = [
  'https://domain1.com',
  'https://domain2.com'
];

// имена хоста можно и сразу в массиве указать без http:// https:// ,
// если не собираетесь с протоколом использовать
var hostNamesList = domainsList.map(function(url) {
  return getDomain(url);
});

function getDomain(url) {
  return url.replace('http://','').replace('https://','').split('/')[0];
}

function isExternal(url) {
  
  return hostNamesList.indexOf(getDomain(url)) === -1;
}

if (isExternal($parent.attr('href')) {
  // do something
}

[HelpSophie]

Антон Спирин, нет способа получить доменные алиасы через js? Или еще каким-нибудь разумным способом?
А то кто знает, что взбредет в голову заказчикам.

[Антон Спирин]

HelpSophie, множество способов. Тут надо их где-то описать и лучше сразу писать в шаблон страницы. Например в:

<script>
  window.__DATA = {
    domainNames:  /* тут передается массив в виде строки */
  };
</script>

Реализация зависит от языка, который вы используете на сервере

[HelpSophie]

Антон Спирин, php

[Антон Спирин]

HelpSophie, я не силен в PHP, но вам надо забрать данные в массив, например $domains_array, передавать данные в шаблон как-то так:

<script>
  window.__DATA = {
    domainNames:  <?php echo json_encode($domains_array); ?>
  };
</script>

В JS коде используете эти данные:
var domainNames = window.__DATA.domainNames;

[HelpSophie]

Антон Спирин, можно уточнить, массив я пишу сама или получаю через какую-то волшебную функцию (js или php)?

[Антон Спирин]

HelpSophie, ну тут как будет удобней. Можно хранить в базе, в каком-нибудь файле или захардкодить.

[HelpSophie]

Антон Спирин, а ну нет, я же спрашивала нельзя ли их как-то автоматом получить. Руками не интересно и нет гарантии.

[HelpSophie]

Антон Спирин, Но всё равно большое спасибо за помощь

[Антон Спирин]

HelpSophie, ее неоткуда получить. У вашего заказчика может быть сколько угодно доменов.

[HelpSophie]

Антон Спирин,

У вашего заказчика может быть сколько угодно доменов.

Может. Именно по этому я не могу ему доверять, что он все их будет писать в какой-нибудь конфиг. Хотелось получить универсальное решение с защитой от дурака.

Answer 2

[DanKud]

if ($parent[0].tagName == "A" && $parent.attr("href").match(/(\.jpg|\.png|\.gif|\.webp)/)) {

Answer 3

[Moses Fender]

Чтобы узнать внешняя или нет ссылка, нужно сравнить свой hostname с hostname или host ссылки. Гляньте в DOM ссылки, там есть такое свойство, причём совершенно актуально, даже если ссылка относительная. Я имею ввиду DOM HTMLAnchorElement'а.

Comments

[HelpSophie]

console.log($parent instanceof HTMLAnchorElement);
Выдает он мне false. И что мне это дает?

Куда гуглить?

нужно сравнить свой hostname с hostname или host ссылки

А если сайт доступен по нескольким доменам?

[Moses Fender]

HelpSophie,

Выдает он мне false. И что мне это дает?

Значит это не ссылка.

А если сайт доступен по нескольким доменам?

Ты же ссылки сравниваешь с location.href.host, который в данный момент создал документ.

[HelpSophie]

Moses Fender,

Ты же ссылки сравниваешь с location.href.host, который в данный момент создал документ.

Например, сайт доступен по адресам domen1.ru и domen2.ru
Пользователь открыл его по domen1.ru, но на сайте стоит ссылка в таком виде

<a href="http://domen2.ru/images/1.jpg"><img src="123.jpg"></a>

Сравнение с location.href.host выдаст мне false и вывод, что ссылка внешняя. А это не так.

[HelpSophie]

Moses Fender,

Значит это не ссылка.

Ссылка, просто [0] забыла.
Хорошо, true.
Но как это позволит найти все домены все равно не понимаю.

[Moses Fender]

- …она и сказала: "Слабо Вольдемару нырнуть?" Ну я и нырнул..
- А почему ты? Вот вечно тебе, Борщев, больше всех надо! Пусть бы Вольдемар и нырял!
- Да она меня Вольдемаром называла!
©

Например, если у тебя сайт доступен по разным доменам, а абсолютные ссылки ты ставишь на domen1, то кто ж тебе виноват?

[HelpSophie]

Moses Fender, эм... в основном, в таких штуках виноват клиент )))) Думаю, вы сами знаете, что некоторые клиенты бывают очень по-странному упертыми.
Хочется сделать так, чтобы посетители сайта по возможности не страдали от странностей клиента. Ну хотя бы сгладить это.