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

@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

Новые блоги и статьи Все статьи Все блоги /
Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025

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

@amr-now 6496 / 3907 / 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 6496 / 3907 / 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 6496 / 3907 / 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 6496 / 3907 / 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 6496 / 3907 / 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