Javascript-форум - можно ли изменить цвет ссылок? и одну ссылку заменить на текст?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - можно ли изменить цвет ссылок? и одну ссылку заменить на текст? (https://javascript.ru/forum/misc/76934-mozhno-li-izmenit-cvet-ssylok-i-odnu-ssylku-zamenit-na-tekst.html)

Malleys, неужели сложно к этому скрипту добавить следующий функционал,

Цитата:

Сообщение от Malleys (Сообщение 505755)

<!DOCTYPE html>
<head><title></title></head>
<body>
<style type="text/css">
body { font: 14px normal Times, serif; }
a { text-decoration: none; color: #5a5aff; }
a:hover { color: #5a96ff; }
a.act { color: #4c994c; }
span.act { color: #4c994c; }
</style>
<div id="msgText">
<a href="001.html">Ссылка 001</a><br/>
<a href="/001.html">Ссылка /001</a><br/>
<a href="css/001.html">Ссылка css/001</a><br/>
<a href="/css/001.html">Ссылка /css/001</a><br/>
<a href="002.html">Ссылка2</a><br/>
<a href="003.html">Ссылка3</a><br/>
<a href="004.html">Ссылка4</a><br/>
<a href="005.html">Ссылка5</a><br/>
<a href="006.html">Ссылка6</a><br/>
<a href="007.html">Ссылка7</a><br/>
</div>
<script type="text/javascript">
(function() {
	var links = Array.prototype.slice.call(document.links);
	for(var index = 0, length = links.length, link; index < length; index++) {
		link = links[index];

		if(link.href === location.href) {
			var p = document.createElement("span");
			p.className = "act";
			p.innerHTML = link.innerHTML;
			link.parentNode.replaceChild(p, link);
		}
	}
})();
</script>
</body>
</html>

массив с именами классов, скрипт после замены тега <а> на спан обрезает адрес полученный через location, с конца до первого слеша находит совпадение среди ссылок и присвает класс который второй в массиве, потом обрезает адрес до второго слеша и присваивает следующий класс из массива и так далее и обернуть в конструкцию DOMContentLoaded

Цитата:

Сообщение от Блондинка

надо подсветить первые три ссылки в каждом див'е

div > a:nth-of-type(-n + 3) { background: yellow; }

Вы посмотрели хоть какие-нибудь материалы, которые я посоветовал вам для изучения CSS?

Цитата:

Сообщение от Блондинка

после замены тега <а> на спан обрезает адрес полученный через location, с конца до первого слеша находит совпадение среди ссылок и присвает класс который второй в массиве, потом обрезает адрес до второго слеша и присваивает следующий класс из массива и так далее

Вы просите найти части URL (это location.href), которые я подсветил в следующем примере... но кроме первой (которую вы заменили на <span>) таких совпадении не происходит!

<p><s>https://example.com/<mark>textbook/css/css-filters-2/properties/backdrop-filter</mark></s></p>
<p>https://example.com/textbook/<mark>css/css-filters-2/properties/backdrop-filter</mark></p>
<p>https://example.com/textbook/css/<mark>css-filters-2/properties/backdrop-filter</mark></p>
<p>https://example.com/textbook/css/css-filters-2/<mark>properties/backdrop-filter</mark></p>
<p>https://example.com/textbook/css/css-filters-2/properties/<mark>backdrop-filter</mark></p>

Malleys,
вот код страницы

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>transform</title>
<style type="text/css">
body { font: 14px normal Times, serif; }
div { border: 1px solid #999; padding: 5px; margin: 5px; }
a:active, a:link { color: #005aff; text-decoration: none; } 
a.:visited { color: #5995ff; text-decoration: none; } 
a:hover { color: #7a00ff; text-decoration: none; }
.efg { color: #167016; }
.def { color: #127a12; }
.cde { color: #0d850d; }
.bcd { color: #068f06; }
.abc { color: #009900; }
</style>
<script>
var classes = ['act',  'abc', 'bcd', 'cde', 'def', 'efg'];
(function() {
	var links = Array.prototype.slice.call(document.links);
	for(var index = 0, length = links.length, link; index < length; index++) {
		link = links[index];

		if(link.href === location.href) {
			var p = document.createElement("span");
			p.className = "act";
			p.innerHTML = link.innerHTML;
			link.parentNode.replaceChild(p, link);
		}
	}
})();
</script>
</head>
<body>
<div class="menu" id="menu1">
<a href="/razdel/">razdel/</a><br>
<a href="/razdel/01.html">page-01</a><br>
<a href="/razdel/02.html">page-02</a><br>
<a href="/razdel/03.html">page-03</a>
<div class="menu" id="menu2">
<a href="/razdel/podrazdel/">podrazdel/</a><br>
<a href="/razdel/podrazdel/01.html">page-01</a><br>
<a href="/razdel/podrazdel/02.html">page-02</a><br>
<a href="/razdel/podrazdel/03.html">page-03</a>
<div class="menu" id="menu3">
<a href="/razdel/podrazdel/podpodrazdel/">podpodrazdel/</a><br>
<a href="/razdel/podrazdel/podpodrazdel/01.html">page-01</a><br>
<a href="/razdel/podrazdel/podpodrazdel/02.html">page-02</a><br>
<a href="/razdel/podrazdel/podpodrazdel/03.html">page-03</a>
<div class="menu" id="menu4">
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/">podrazdel-a/</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/01.html">page-01</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/02.html">page-02</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/03.html">page-03</a>
</div>
</div>
</div>
</div>
</body>
</html>

а вот адрес сайт.ru/razdel/podrazdel/podpodrazdel/podrazdel-a/01.html"

На этой странице надо найти ссылки соответствующие текущему адресу, через location href обрезать окончания адреса до слеша и присвоить классы из массива, так понятно будет?

Цитата:

Сообщение от Блондинка

надо найти ссылки соответствующие текущему адресу, через location href обрезать окончания адреса

<!doctype html>
<html>
<head>
	<title>transform</title>
	<style>
		body { font: 14px normal Times, serif; }
		div { border: 1px solid #999; padding: 5px; margin: 5px; }
		a { color: #005aff; text-decoration: none; } 
		a:visited { color: #5995ff; text-decoration: none; } 
		a:hover { color: #7a00ff; text-decoration: none; }
		.act { color: initial; pointer-events: none; }
		.efg { color: #167016; }
		.def { color: #127a12; }
		.cde { color: #0d850d; }
		.bcd { color: #068f06; }
		.abc { color: #009900; }
	</style>
	<script>
		document.addEventListener("DOMContentLoaded", function() {
			var links = Array.prototype.slice.call(document.links);
			var classes = ["act",  "abc", "bcd", "cde", "def", "efg"];
			var href = location.href;

			for(var index = 0, length = links.length, link; index < length; index++) {
				link = links[index];

				for(var level = 0, part = href; level < classes.length; level++) {
					if(link.href === part || link.href === part + "/") {
						link.className = classes[level];
						break;
					}

					part = part.replace(/\/[^/]*\/?$/, "");
				}
			}
		});
	</script>
</head>
<body>
<div class="menu" id="menu1">
	<a href="/razdel/">razdel/</a><br>
	<a href="/razdel/01.html">page-01</a><br>
	<a href="/razdel/02.html">page-02</a><br>
	<a href="/razdel/03.html">page-03</a>
	<div class="menu" id="menu2">
		<a href="/razdel/podrazdel/">podrazdel/</a><br>
		<a href="/razdel/podrazdel/01.html">page-01</a><br>
		<a href="/razdel/podrazdel/02.html">page-02</a><br>
		<a href="/razdel/podrazdel/03.html">page-03</a>
		<div class="menu" id="menu3">
			<a href="/razdel/podrazdel/podpodrazdel/">podpodrazdel/</a><br>
			<a href="/razdel/podrazdel/podpodrazdel/01.html">page-01</a><br>
			<a href="/razdel/podrazdel/podpodrazdel/02.html">page-02</a><br>
			<a href="/razdel/podrazdel/podpodrazdel/03.html">page-03</a>
			<div class="menu" id="menu4">
				<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/">podrazdel-a/</a><br>
				<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/01.html">page-01</a><br>
				<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/02.html">page-02</a><br>
				<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/03.html">page-03</a>
			</div>
		</div>
	</div>
</div>
</body>
</html>

Так подходит?

Широкие однако у вас интересы... Теперь учебник про подподподразделы пишете!

Цитата:

Сообщение от Блондинка

так понятно будет?

Откуда мне знать было, что ссылки надо читать справа налево!

Malleys,
если честно то не знаю, на странице почему то не подсвечивает,

P. S. я походу опять не так объяснила, ссылка на саму себя должна заменится на спан которому надо присвоить класс который стоит первым в массиве
степень вложенности может быть намного больше, порядка 12-15, до 20 (/папка/папка/.../папка/ и т.д.)

мне почему-то казалось что фраза (ну или пост)

Цитата:

Сообщение от Блондинка

неужели сложно к этому скрипту добавить следующий функционал

автоматически подразумевает замену тега <а> на спан

Вы поменяли 33 строчку... хотя это вы попытались пошутить и неожиданно спалились, что вы знаете тонкости RegExp!

Какой баг!!! Я проверял этот скрипт на реальных переходах по ссылке (сервер же можно настроить так, чтобы он отвечал на все запросы одним ответом) Однако ваш ларёк теряет обратные слеши, если создавать файл через их сайт, однако если загрузить файл, то не теряет! Вам надо сохранить скрипт в файл, и затем загрузить на ларёк!

Malleys,
сейчас загрузила страницу, обратные слеши появились, ссылка на саму себя заменилась на текст, но ссылки на главные папок почему то не подсвечивает, и в моём браузере и в опере классик

А почему вы решили, что если правило написать ниже в CSS, то оно отменяет те, которые выше?

a:active, a:link замените на a

Вы не ответили на вопрос... Вы посмотрели видео/статьи про CSS?

Цитата:

Сообщение от Блондинка

ссылки на главные папок почему то не подсвечивает

Вы хоть какие-нибудь усилия предприняли, чтобы понять почему оно не подсвечивает? Скрипт уже расставил ваши классы!

Цитата:

Сообщение от Malleys

Вы не ответили на вопрос... Вы посмотрели видео/статьи про CSS?

если честно, то не до конца, пока в процессе изучения/запоминания