JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<h4>Повторитель кода</h4>
<p>Исходный код повторится, а <code>$$</code> заменится на номер итерации <code>1..число_повторов</code></p>
<label>
  Число повторов
  <input id="count" type="number" min="1" max="100" value="3"/>
</label>
<div class="container">
  <div>
    <label>
      Исходный код<br/>
      <textarea id="ta_i" rows="10"><div>Test $$</div></textarea>
    </label>
  </div>
  <div>
    Результат<br/>
    <textarea id="ta_o" rows="10"></textarea>
  </div>
</div>

CSS

div.container {
  margin-top: 20px;
  display: flex;
}

div.container>div {
  flex: 1;
}

textarea {
  width: 90%;
}

JavaScript

/**
 * для вопроса https://qna.habr.com/q/1059018
 * Как динамически продублировать кусок кода?
 */
const els = {};
["count", "ta_i", "ta_o"]
  .forEach((id) => els[id] = document.getElementById(id));

const update = () => {
  const count = +els.count.value;
  const code = els.ta_i.value;
  const result = [];
  const regex = /\${2}/g;
  for (let i = 0; i < count; i++) {
    result.push(code.replaceAll(regex, (i+1)));
  }
  els.ta_o.value = result.join("\n");
}

["count", "ta_i"]
  .forEach((id) => els[id].addEventListener("input", update));
  
update();