Обернуть в слова в теги

[Roman52]

Доброго времени!

Есть такой HTML код:

<div class="hero-intro__nav-text">
	<div aria-label="APPLY NOW • RESIDENTS" style="position: relative; height: 4.04204em;">
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-25.7206deg); transform-origin: center 30em;">A</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-24.2048deg); transform-origin: center 30em;">P</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-22.6891deg); transform-origin: center 30em;">P</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.309766em) rotate(-21.3192deg); transform-origin: center 30em;">L</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.365234em) rotate(-19.9856deg); transform-origin: center 30em;">Y</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.189062em) rotate(-18.8905deg); transform-origin: center 30em;">&nbsp;</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.411328em) rotate(-17.7043deg); transform-origin: center 30em;">N</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.439063em) rotate(-16.0241deg); transform-origin: center 30em;">O</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.522266em) rotate(-14.1248deg); transform-origin: center 30em;">W</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.522266em) rotate(-14.1248deg); transform-origin: center 30em;">&nbsp;</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.522266em) rotate(-14.1248deg); transform-origin: center 30em;">|</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.189062em) rotate(-12.7194deg); transform-origin: center 30em;">&nbsp;</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.411328em) rotate(-9.89556deg); transform-origin: center 30em;">R</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-8.32502deg); transform-origin: center 30em;">E</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-6.80928deg); transform-origin: center 30em;">S</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.189062em) rotate(-5.67787deg); transform-origin: center 30em;">I</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.411328em) rotate(-4.49167deg); transform-origin: center 30em;">D</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-2.92113deg); transform-origin: center 30em;">E</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.411328em) rotate(-1.35059deg); transform-origin: center 30em;">N</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.355469em) rotate(0.164386deg); transform-origin: center 30em;">T</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(1.62456deg); transform-origin: center 30em;">S</span>
	</div>
</div>

Нужно обернуть слова APPLY NOW и RESIDENTS в теги <a href="#"></a> по разделителю |

У меня впринципе почти получилось, вот код:

let navLinks = document.querySelector('.hero-intro__nav-text');
let navLinksText = navLinks.children[0].innerHTML;
	
navLinksText = '<a href="#">' + navLinksText;

for (var i = 0; i < navLinksText.length; i++) {
	if (navLinksText.charAt(i) == '|') {
		navLinksText = navLinksText.substring(0, i) + '</a><a href="#">' + navLinksText.substring(i + 1, navLinksText.length);
	}
}

navLinksText = navLinksText + '</a>';

console.log(navLinksText);

но я зависаю на строке

let navLinksText = navLinks.children[0].innerHTML;

у меня метод .innerHTML вырезает все атрибуты styles у тегов <span> а мне этого не нужно, нужно чтобы они остались. В этом затык. Буду благодарен за помощь.

[рони]

Roman52,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        a>span {
            border: 1px solid #FF0000;

        }
    </style>
</head>

<body>
    <div class="hero-intro__nav-text">
        <div aria-label="APPLY NOW • RESIDENTS" style="position: relative; height: 4.04204em;">
            <span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-25.7206deg); transform-origin: center 30em;">A</span>
            <span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-24.2048deg); transform-origin: center 30em;">P</span>
            <span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-22.6891deg); transform-origin: center 30em;">P</span>
            <span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.309766em) rotate(-21.3192deg); transform-origin: center 30em;">L</span>
            <span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.365234em) rotate(-19.9856deg); transform-origin: center 30em;">Y</span>
            <span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.189062em) rotate(-18.8905deg); transform-origin: center 30em;">&nbsp;</span>
            <span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.411328em) rotate(-17.7043deg); transform-origin: center 30em;">N</span>
            <span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.439063em) rotate(-16.0241deg); transform-origin: center 30em;">O</span>
            <span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.522266em) rotate(-14.1248deg); transform-origin: center 30em;">W</span>
            <span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.522266em) rotate(-14.1248deg); transform-origin: center 30em;">&nbsp;</span>
            <span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.522266em) rotate(-14.1248deg); transform-origin: center 30em;">|</span>
            <span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.189062em) rotate(-12.7194deg); transform-origin: center 30em;">&nbsp;</span>
            <span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.411328em) rotate(-9.89556deg); transform-origin: center 30em;">R</span>
            <span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-8.32502deg); transform-origin: center 30em;">E</span>
            <span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-6.80928deg); transform-origin: center 30em;">S</span>
            <span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.189062em) rotate(-5.67787deg); transform-origin: center 30em;">I</span>
            <span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.411328em) rotate(-4.49167deg); transform-origin: center 30em;">D</span>
            <span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-2.92113deg); transform-origin: center 30em;">E</span>
            <span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.411328em) rotate(-1.35059deg); transform-origin: center 30em;">N</span>
            <span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.355469em) rotate(0.164386deg); transform-origin: center 30em;">T</span>
            <span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(1.62456deg); transform-origin: center 30em;">S</span>
        </div>
    </div>
    <script>
        let navDiv = document.querySelector('.hero-intro__nav-text > div');
        let navSpans = Array.from(navDiv.querySelectorAll('span'));
        let index = navSpans.findIndex(({
            textContent
        }) => textContent.includes('|'));
        let link = document.createElement('a');
        link.href = '#';
        let linkClone = link.cloneNode();
        link.append(...navSpans.slice(0, index - 1))
        linkClone.append(...navSpans.slice(index + 1))
        navDiv.append(link, navSpans[index], linkClone)
    </script>
</body>

</html>

[Roman52]

Спасибо большое, очень помогли!

[voraa]

у меня метод .innerHTML вырезает все атрибуты styles у тегов <span>

Это как это так? Быть такого не может.