drmodjo, вы можете через сервер узнать, какой статус возвращает ресурс, и уже на клиенте раскрасить ссылки в зависимости от статуса ссылки. Вот PHP-скрипт, который «узнаёт» статус запрашиваемого ресурса...
<?php
$headers = get_headers($_GET['url']);
header($headers ? $headers[0] : $_SERVER['SERVER_PROTOCOL'] . ' 500');
header('Access-Control-Allow-Origin: *');
Для примера я его опубликовал на
https://is-valid-url.malleys.repl.co/index.php
Пример...
<section>
<a href="https://javascript.ru/forum/jquery/79699-proverka-ssylki-na-aktivnost-3.html">javascript.ru/forum/jquery/79699-proverka-ssylki-na-aktivnost-3</a>
<a href="http://javascript.ru/forum/jquery/ams">javascript.ru/forum/jquery/ams</a>
<a href="https://site.ru/public/1024">site.ru/public/1024</a>
<a href="https://google.ru/">google.ru</a>
<a href="https://bprice.ge/keis191">bprice.ge/keis191</a>
<a href="https://javascript.ru/cat/list/j_s.gif">javascript.ru/cat/list/j_s.gif</a>
<a href="https://javascript.ru/cat/list/js.gif">javascript.ru/cat/list/js.gif</a>
</section>
<style>
a {
all: unset;
display: block;
pointer-events: none;
font-size: 200%;
}
a:before {
content: "♻";
color: gold;
width: 1em;
display: inline-block;
}
a.ok {
pointer-events: all;
text-decoration: underline;
color: blue;
cursor: pointer;
}
a.ok:before {
content: "✔";
color: yellowgreen;
}
a.error:before {
content: "✖";
color: red;
}
</style>
<script>
(async function main() {
for (const link of document.links) {
const { status } = await fetch("https://is-valid-url.malleys.repl.co/index.php?url=" + encodeURIComponent(link));
link.classList.add(status >= 200 && status < 400 ? "ok" : "error");
}
})();
</script>
Всё просто — в зависимости от статуса на ссылку добавляется соответствующий класс — "ok" или "error".
