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

Question

[Николай]

Добрый вечер.
Каким сервисом можно воспользоваться для дублирования куска кода по шаблону?

Пример текста:
<div class="text(++)"></div>

На выходе получить:

<div class="text1"></div>
<div class="text2"></div>
<div class="text3"></div>
....

Спасибо!

Comments

[Сергей Соколов]

Где такое должно работать: в редакторе кода (каком именно?), в самой опубликованной странице?
++ это сколько раз

[Алексей Дубровин]

Лучше опишите задачу которую вы хотите сделать,вам подскажут как это правильнее решить. Пока это походит в полное непонимание инструмента с которым работаете.

[Николай]

Сергей Соколов, Алексей Дубровин, тут нет никакой зависимости к IDE, просто я уже натыкался на подобный сайт с такой возможностью, но не могу его теперь найти. Просто требуется возможность взять любой кусок текста/кода и продублировать его n раз, где n - число которое можно указать самому и помимо этого иметь возможность добавить в любое место текста постоянно увеличивающееся число, например ....id="text(n)"... > ....id="text1"... > ...id="text2" > ...id="text3" . Получается 4 дублирования с разными id

[Алексей Дубровин]

Николай, Если контент отдаётся с сервера то это на php обычный цикл.
Если динамически то на js. Опять же обычный цикл

[Сергей Соколов]

Николай, объясните на пальцах. Вы хотите сайт, куда зайти, там окошко для текста, вы вставляете свой какой-то код, жмёте кнопку и в окошке же появляется текст, размноженный и с подстановкой увеличивающегося счётчика. Вы это текст-код копируете и дальше где-то используете у себя. Так?

[Николай]

Сергей Соколов, в точку!))

Answer 1

[Сергей Соколов]

Исходный код повторится, а $$ заменится на номер итерации 1..число_повторов

Фиддл

Answer 2

[Aetae]

Во всех IDE для веба есть Emmet: пишете div.text$*3 - тыкаете tab и готово.
Если же вам надо на самом сайте, то обрисуйте конкретнее задачу.

Comments

[Николай]

<div class="panel panel-default">
        <div class="panel-heading" id="heading6" role="tab">
            <h2 class="panel-title">
                <a aria-controls="collapse6" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#collapse6" role="button"><i class="pull-left icon_plus"></i> текст</a>
            </h2>
        </div>

        <div aria-labelledby="heading6" class="panel-collapse collapse in show" id="collapse6" role="tabpanel">
            <div class="panel-body">
                <p>текст</p>
            </div>
        </div>
    </div>

Мне необходимо продублировать уже готовый кусок кода с динамическим изменением для heading6 и collapse6 > collapse7 heading7 > collapse8 heading8 ...

[Aetae]

Николай, начнём с того что вам этого не надо. Серрьёзно, вы что-то делаете не так. Цифры в классах не нужны никогда. Вы должны использовать одни конкретный класс и работать в циклах с коллекциями.

Вот тебе кусок кода, который делает то что ты хочешь:

function cloneAndIncrement(element, ...attrs) {
  const copy = element.cloneNode(true);

  attrs.forEach(attr => {
    const selector = `[${attr}]`;
    const list = [...copy.querySelectorAll(selector)];
    
    if(copy.matches(selector))
      list.push(copy);
    
    if(list.length === 0)
      return;
    
    list.forEach(node => {
      let flag = false;

      const text = node
        .getAttribute(attr)
        .replace(/\d+(?=$|\s)/, n => (flag = true) && ++n);

      if(flag)
        node.setAttribute(attr, text);
    });
  });

  return copy;
}

const panel = document.querySelector('.panel.panel-default');
const clone = cloneAndIncrement(panel, 'id', 'href', 'aria-controls', 'aria-labelledby');

panel.after(clone);

Но это полный бред.)