Как найти ссылки в списке и устанавливать им дополнительные стили

@Esso11 · Регистрация: 20.08.2017

Студворк — интернет-сервис помощи студентам

Подскажите как мне найти ссылки в списке и устанавливать им дополнительные стили. Написал такой код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
<body>
<ul>
<p><li><a href = "https://google.com"> Гугл</a></p></li>
<p><li><a href="https://itstep.org"> Шаг</a></p></li>
<p><li><a href= "https://mystat.itstep.org"> Май стат</a></p></li>
<p><li><a href="https://bigpicture.ru/?p=527019"> Кошара</a></p></li>
<p><li><a href=""> Собака</a></p></li>
<p><li><a href=""> Playboy</a></p></li>
</ul>
 
<script>
var res =  str.match( /https/i );
  //var elements = document.querySelectorAll('ul > li:last-child');
 
  for (var i = 0; i < elements.length; i++) 
  {
   // --- логика  проверки  является ли ссылка локальной или  нет--//
  }
</script>
 
 
    
</body>/script>

CSS
1
2
3
4
5
6
7
a {
    color: blue; /* Цвет ссылок */
    text-decoration: none; /* Убираем подчёркивание */
   }
   a:hover {
    border-bottom: 1px dashed blue; /* Добавляем синее пунктирное подчёркивание */
   }

Но так как в JS я новичок не знаю какую проверку написать надо что бы узнать какая ссылка локальная какая нет

было предположение сделать что то типа такого:
if(elements[i]=="res")
elements[i] = // тут присвоить сss стиль но тоже не знаю как(((

@sash23 · 04.03.2019, 20:02

найдет локальные ссылки то есть те которые не начинаются с http

JavaScript
1
var links = document.querySelectorAll('ul a:not([href^="http"])');

вот пример https://jsfiddle.net/4ugy6kb1/2/

@Esso11 · 04.03.2019, 20:12 **[ТС]**

sash23, простите, а могли бы прокомментировать что происходит тут

JavaScript
1
('ul a:not([href^="http"])');

Добавлено через 5 минут
sash23, а можно ли как то стиль подчеркивания присвоить вместо цвета т.е. то что у меня указано в css

@amr-now · 04.03.2019, 20:23

Esso11, внешним ссылкам. начинающимся с http: или https:
можно присвоить отдельный класс .a

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .a {
            color: blue;
            /* Цвет ссылок */
            text-decoration: none;
            /* Убираем подчёркивание */
        }
 
        .a:hover {
            border-bottom: 1px dashed blue;
            /* Добавляем синее пунктирное подчёркивание */
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="https://google.com"> Гугл</a></li>
        <li><a href="https://itstep.org"> Шаг</a></li>
        <li><a href="https://mystat.itstep.org"> Май стат</a></li>
        <li><a href="https://bigpicture.ru/?p=527019"> Кошара</a></li>
        <li><a href=""> Собака</a></li>
        <li><a href=""> Playboy</a></li>
    </ul>
    <script>
        for (let e of Array.from(document.links)) { // document.links для упрощения - все ссылки в документе
            if (e.href.match(/^https?:/i))
                e.classList.add("a")
        }
    </script>
</body>
</html>

@sash23 · 04.03.2019, 20:23

Esso11,

JavaScript
1
el.style.borderBottom = '1px dashed blue';

@amr-now · 04.03.2019, 20:24

Хотя да, сложным css-селектором выбрать необходимые ссылки - круче.

@sash23 · 04.03.2019, 20:28

Тоже самое можно сделать и без JS.

CSS
1
2
3
4
5
6
7
ul a {
  text-decoration: none;
}
 
ul a:not([href^="http"]) {
  border-bottom: 1px dashed blue;
}

@amr-now · 04.03.2019, 20:35

sash23, селектор просто разрастается, если одновременно http: и https: проверять.

@Esso11 · 04.03.2019, 20:39 **[ТС]**

amr-now, т.е. еще один класс создать?

Добавлено через 2 минуты
amr-now, не я не крутой мне для аутистов подошло бы, подскажите как мне создать 2 класса если в стилях если она будут называться одинаково. Разве конфликта имен не произойдет?

@amr-now · 04.03.2019, 20:39

Esso11, задачу сформулируйте точнее.
Что делать с локальными ссылками?
Что делать с http: ?
Что делать с https: ?

@Esso11 · 04.03.2019, 20:40 **[ТС]**

amr-now, Ссылки на внешние источники (которые начинаются с http://)
необходимо подчеркнуть пунктиром.
Искать такие ссылки в списке и устанавливать им дополнительные стили необходимо с помощью JS.

@amr-now · 04.03.2019, 20:41

Esso11, https:// не начинается с http://
Что в этом случае делать?

@Esso11 · 04.03.2019, 20:43 **[ТС]**

amr-now,с https: выделение другим цветом не таким как локальная ссылка

Добавлено через 1 минуту
amr-now, не правильно написал первую ссылку там http://

@amr-now · 04.03.2019, 20:43

Подчеркнуть пунктиром при наведении или навеки? А при ненаведении какие?

@Esso11 · 04.03.2019, 20:46 **[ТС]**

amr-now, при наведении на любую ссылку назначить различный стиль, что бы было понятно что сработал поиск и установился заданный стиль

Добавлено через 37 секунд
amr-now, да при ненаведении они просто не подчеркнутые там стоят же

@amr-now · 04.03.2019, 20:52

Esso11, sash23, кто как, а я задачу пока вообще не понял.
Что делать с локальными ссылками?
Что делать с http: ?
Что делать с https: ?

С каким они стилем без наведения и при наведении?

И где ссылки с http://

@Esso11 · 04.03.2019, 20:53 **[ТС]**

amr-now, sash23, ладно, спасибо вам за помощь, понял куда надо "копать" почитаю про селекторы попробую сам дописать

Добавлено через 12 секунд
извините если занял ваше время

@amr-now · 04.03.2019, 21:01

Esso11,
Если так нужно для всех элементов <a>, то все синие и без подчеркивания

CSS
1
2
3
4
   a {
    color: blue; /* Цвет ссылок */
    text-decoration: none; /* Убираем подчёркивание */
   }

Настоящие внешние ссылки с классом .а с пунктирным подчеркиванием при наведении. Ненаведенные ничем не отличаются от внутренних ссылок.

CSS
1
2
3
   .a:hover {
    border-bottom: 1px dashed blue; /* Добавляем синее пунктирное подчёркивание */
   }

Класс .а навешивается в моем ответе №4

Новые блоги и статьи Все статьи Все блоги /
Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

@amr-now 6497 / 3908 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	04.03.2019, 20:24
	Хотя да, сложным css-селектором выбрать необходимые ссылки - круче. 0

@amr-now 6497 / 3908 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	04.03.2019, 20:35
	sash23, селектор просто разрастается, если одновременно http: и https: проверять. 0

@Esso11 5 / 5 / 0 Регистрация: 20.08.2017 Сообщений: 685
	04.03.2019, 20:39 [ТС]
	amr-now, т.е. еще один класс создать? Добавлено через 2 минуты amr-now, не я не крутой мне для аутистов подошло бы, подскажите как мне создать 2 класса если в стилях если она будут называться одинаково. Разве конфликта имен не произойдет? 0

@amr-now 6497 / 3908 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	04.03.2019, 20:39
	Esso11, задачу сформулируйте точнее. Что делать с локальными ссылками? Что делать с http: ? Что делать с https: ? 0

@Esso11 5 / 5 / 0 Регистрация: 20.08.2017 Сообщений: 685
	04.03.2019, 20:40 [ТС]
	amr-now, Ссылки на внешние источники (которые начинаются с http://) необходимо подчеркнуть пунктиром. Искать такие ссылки в списке и устанавливать им дополнительные стили необходимо с помощью JS. 0

@amr-now 6497 / 3908 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	04.03.2019, 20:41
	Esso11, https:// не начинается с http:// Что в этом случае делать? 0

@Esso11 5 / 5 / 0 Регистрация: 20.08.2017 Сообщений: 685
	04.03.2019, 20:43 [ТС]
	amr-now,с https: выделение другим цветом не таким как локальная ссылка Добавлено через 1 минуту amr-now, не правильно написал первую ссылку там http:// 0

@amr-now 6497 / 3908 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	04.03.2019, 20:43
	Подчеркнуть пунктиром при наведении или навеки? А при ненаведении какие? 0

@Esso11 5 / 5 / 0 Регистрация: 20.08.2017 Сообщений: 685
	04.03.2019, 20:46 [ТС]
	amr-now, при наведении на любую ссылку назначить различный стиль, что бы было понятно что сработал поиск и установился заданный стиль Добавлено через 37 секунд amr-now, да при ненаведении они просто не подчеркнутые там стоят же 0

@amr-now 6497 / 3908 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	04.03.2019, 20:52
	Esso11, sash23, кто как, а я задачу пока вообще не понял. Что делать с локальными ссылками? Что делать с http: ? Что делать с https: ? С каким они стилем без наведения и при наведении? И где ссылки с http:// 0

@Esso11 5 / 5 / 0 Регистрация: 20.08.2017 Сообщений: 685
	04.03.2019, 20:53 [ТС]
	amr-now, sash23, ладно, спасибо вам за помощь, понял куда надо "копать" почитаю про селекторы попробую сам дописать Добавлено через 12 секунд извините если занял ваше время 0