Спасибо

Блондинка, И что не так?
Конечная страница имеет 4-й уровень вложенности, поэтому класс ссылкам с href="/menu/css/css3/transform.html" присвоен xyz4, ссылок
/menu/css/css3.html
/menu/css.html
/menu.html
у вас в коде нет, поэтому и классы xyz[1-3] проставлять нечему.

Можете откорректировать наименования классов изменив локальную функцию "getClassName" в коде.

https://jsfiddle.net/k3xz05sf/1/

<style>
body { font: 14px normal Times, serif; }
div { border: 1px solid #ccc; padding: 5px; margin: 5px; }
a { text-decoration: none; color: #3c3vff; }
.xyz1 { color: #0F0; }
.xyz2 { color: #FF0; }
.xyz3 { color: #F00; }
</style>
<div class="menu" id="menu1">
<a href="/html.html">HTML</a> 
<a href="/css.html">CSS</a> 
<a href="/js.html">JS</a> 
</div>
<div class="menu" id="menu2">
<a href="/css/css3.html">CSS3</a><br/>
<div>
<a href="/menu/css/css3/transform.html">transform</a><br/>
<a href="/menu/css/css3/transform-origin.html">transform-origin</a><br/>
<a href="/menu/css/css3/transform-style.html">transform-style</a><br/>
</div>
</div>
<script>
(()=>{
	//const uriWithoutParams=location.pathname.split(/[#|?]+/i).shift();
	const uriWithoutParams='/menu/css/css3/transform.html'.split(/[#|?]+/i).shift();
	const extension=uriWithoutParams.split('.').pop();
	let uriParts=uriWithoutParams.replace('.'+extension,'').split('/').filter(part=>part.length);
	const getClassName=index=>'xyz'+index;
	const maxPostfix=3;
	
	uriParts.forEach((uri,index)=>{
		uri=`/${uriParts.slice(0,++index).join('/')}.${extension}`;
		index=maxPostfix-(uriParts.length-index);
		if(index<=0)
			return;
		
		const className=getClassName(index);
		
		document.querySelectorAll(`a[href="${uri}"]`).forEach(node=>{
			node.classList.add(className);
			if(index!==maxPostfix)
				return;
			
			node.textContent='someText';
		});
	});
})();
</script>

Добавила классы .xyz4 .xyz5 .xyz6 .xyz7 добавила ссылки

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

Блондинка,
Ссылка "transform" должна стать красной и сменить текст на "someText".
Ссылки "CCS3" и "CSS" остались синими, поскольку они не имеют отношения к текущему пути, т.к. у них в адресе нет директории "menu".

Во блин, с каждым разом все больше загадок, почему то ссылка "transform" осталась синей? что такое "someText" и зачем оно нужно? вопрос в названии я написала "и одну ссылку заменить на текст?" а не "изменить текст ссылки"

вот почти работающий скрипт

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

		if(link.href === location.href) {
			var p = document.createElement("span");
			p.className = "xyz1";
			p.innerHTML = link.innerHTML;
			link.parentNode.replaceChild(p, link);
		}
	}
})();

на он работает только если прописать адрес без слеша, а если прописать адрес со слешем /transform.html или так /css/css3/transform.html то не работает, и не меняет цвет у других ссылок имеющие отношения к текущему пути, и для наилучшего варианта надо в скрипте указать количество директорий перечислив необходимые "xyz1", "xyz2", "xyz3", "xyz4", "xyz5", "xyz6", xyz7", xyz8" и дальше чтобы можно было в скрипте изменить названия классов потом в стиле прописать эти классы чтобы было интуитивно понятно чему соответствует каждый класс, и выбросить и скрипт и стиль в отдельные файлы

Консоль не смотрели?
Не так понял

Попробуйте так:

(function() {
        const uriWithoutParams=location.pathname.split(/[#|?]+/i).shift();
        //var uriWithoutParams = '/menu/css/css3/transform.html'.split(/[#|?]+/i).shift();
        var extension = uriWithoutParams.split('.').pop();
        var uriParts = uriWithoutParams.replace('.' + extension, '').split('/').filter(function(part) {
            return part.length;
        });
        var getClassName = function(index) {
            return 'xyz' + index;
        };
        var maxPostfix = 3;

        uriParts.forEach(function(uri, index) {
                uri = '/' + uriParts.slice(0, ++index).join('/') + '.' + extension;
                index = maxPostfix - (uriParts.length - index);
                if (index <= 0)
                    return;

                var className = getClassName(index);

                [].forEach.call(document.querySelectorAll('a[href="' + uri + '"]'), function(node) {
                    node.classList.add(className);
                    if (index !== maxPostfix)
                        return;

                    var textNode = document.createElement('span');
                    textNode.textContent = 'someText';
                    textNode.className = className;
                    node.parentNode.insertBefore(textNode, node);

                    node.parentNode.removeChild(node);
                }));
        });
})();

11 строчка var maxPostfix = 3; это степень вложенности? и надо обернуть в конструкцию DOMContentLoaded?