JS. замена текста (id, data-*) в склонированном объекте

Question

Есть таблица построенная наборами div, у div ячеек есть id и разный набор data атрибутов, которые ещё и названы кириллицей. Между ячейками есть события различные, завязанные на id, data-*

При клонированиии строки (class="row") у клона всё повторяется. Вопрос: как можно представить объект как текст и заменить все вхождения текста на другой. в примере: заменить везде 12 на 12@1

Если вывести в консоль объект, то он как текст выводится.

<div class="row">
    <div id="A12" data-Источник="A1"></div>
    <div id="B12" data-Страна.Код="C12"></div>
    <div id="C12"></div>
    <div id="D12" data-Страна.Код="E12" data-Чегототам.Код ="X12"></div>
    <div id="E12"></div>
</div>
<script>
let cloneRow = document.querySelector('.row').cloneNode(true);
// ??? cloneRow.replace('12' , '12@1');

</script>

Answer 1

При клонированиии строки (class="row") у клона всё повторяется. Вопрос: как можно представить объект как текст и заменить все вхождения текста на другой. в примере: заменить везде 12 на 12@1

Например вот так...

const o = document.querySelector('.row').cloneNode(true)
o.querySelectorAll('div').forEach(o => {
    o.getAttributeNames().forEach(k => {
        const v = o.getAttribute(k).replace(/12/, '$&@1')
        console.log(v)
        o.setAttribute(k, v)
    })
})
test.insertAdjacentElement('beforeend', o)

<section id='test'>
  <div class="row">
    <div id="A12" data-Источник="A1"></div>
    <div id="B12" data-Страна.Код="C12"></div>
    <div id="C12"></div>
    <div id="D12" data-Страна.Код="E12" data-Чегототам.Код="X12"></div>
    <div id="E12"></div>
  </div>
</section>

Если первый вариант не подходит - надеюсь такой подход будет достаточно простым...

const o = document.querySelector('.row').cloneNode(true)
o.innerHTML = o.innerHTML.replace(/12/g, '$&@1')
test.insertAdjacentElement('beforeend', o)

<section id='test'>
  <div class="row">
    <div id="A12" data-Источник="A1"></div>
    <div id="B12" data-Страна.Код="C12"></div>
    <div id="C12"></div>
    <div id="D12" data-Страна.Код="E12" data-Чегототам.Код="X12"></div>
    <div id="E12"></div>
  </div>
</section>

БЛОГ НА HUSL

JS. замена текста (id, data-*) в склонированном объекте

Ответы (1 шт):