Как разделить контент в блоке на две части?

Question

[Дмитрий]

<span>
<strong><span class="indicator">PARTY ROLE-2</span></strong> has the meaning set out in Clause <span class="cross_link"><span><span class="indicator">FULL COMPANY NAME OF THE COUNTERPARTY</span>, a legal entity incorporated and registered in<span class="indicator">COUNTRY OF THE COUNTERPARTY</span>under registration number (or identification equivalent of a similar nature)<span class="indicator">COMPANY NUMBER OF THE COUNTERPARTY</span>whose registered office is at<span class="indicator">REGISTERED OFFICE ADDRESS OF THE COUNTERPARTY</span>(<em>the<strong><span class="indicator">PARTY ROLE-2</span></strong></em>) Test</span></span> of the preamble hereof
</span>

К примеру, есть такой HTML код, мне нужен javascript код который может разделить его на +- две ровные части при этом учитывая наличие HTML тэгов, цель получить два тега в каждом из которых по примерно половине контента из родительского.

Comments

[Алексей Уколов]

Один span невозможно поделить на две части, не меняя при этом структуру (по определению нужно будет либо удалить сам span, либо добавить ещё один).
Приложите к вопросу пример желаемого результата, так всем будет проще.

[Дмитрий]

Алексей Уколов, Имеел ввиду чтобы код не разделял тег тупо по середине, чтобы в первой части было:
<em>The content about
а во второй: bank</em>
и это в итоге не зарендерится по скольку не коректно по структуре

[Алексей Уколов]

Приложите к вопросу пример желаемого результата, так всем будет проще.

Answer 1

[iljaGolubev]

С трудом понял, что-же вам нужно, но, надеюсь, правильно:)
Идея в том, чтобы рекурсивно перебирать все ноды спана, считать длину содержимого каждой ноды, и добавлять её в первую часть пока пока не превышен лимит количества. В начале итерации лимит - половина от всего текста спана.

function aggregator (a, c, maxChars){
    if (a[0].textContent.length > maxChars) {
        a[1].appendChild(c)
    } else if (c.children?.length > 0) {
        const agg = spanParse(c, maxChars - a[0].textContent.length);
        a[0].appendChild(agg[0])
        if (agg[1]) {
            a[1].appendChild(agg[1])
        }
    } else {
        a[0].appendChild(c)
    }
    return a;
}
function spanParse(rootSpan, maxChars) {
    const aggregated = [document.createElement('span'), document.createElement('span')]
    return [...rootSpan.childNodes].reduce((a, c) => aggregator(a, c, maxChars), aggregated)
}
function split(elem) {
    const r = spanParse(elem, elem.textContent.length / 2)
    console.log(r[0].textContent.length, r[1].textContent.length)
}

split(document.getElementByTag('span'));

С тем кодом который в вопросе работать будет если span с текстом есть на странице. Если с какой-то другой разметкой будут ошибки, то нужно докрутить логики в aggregator.