Проблемки со .split()

Question

У меня есть проблемка:

вот моя программа:

function TranslateIt() {
  firstTextarea = document.getElementById("1text_area");
  secndTextarea = document.getElementById("2text_area");

  secndTextarea.innerHTML =
    `<li>Hello guys</li>
  ` +
    firstTextarea.innerHTML.mreplace(/readln\((.+?)\)/gi, " = Console.ReadLine()")
}


String.prototype.mreplace = function(reg, res) {
  var done;
  firstStep = this.replace(reg, '$1')
  secondStep = firstStep.split(',')
  if (this.match(reg)) {
    for (let i = 0; i < secondStep.length; i++) {
      done += secondStep[i] + res + "</li><li>";
    }
    return done
  }
  return this;
};

ol {
  border: 1px solid black;
  resize: both;
  overflow: auto;
}

<button onclick="TranslateIt()">Click</button>
<div>
  <code>
        <ol
          id="1text_area"
          contenteditable
        ><li>Текст</li>
        <li>Текст</li>
        <li>Текст</li>
        <li>readln(a, b);</li>
        <li>Текст</li>
        <li>Текст</li>
        </ol>
      </code> Result:
  <code>
        <ol
          id="2text_area"
          contenteditable
        ></ol
      ></code>
</div>

Вопросы: 1) у меня получается так, что после .split() - secondStep[0] это:

Текст

a,

А secondStep[1] это:

b

Текст

И " = Console.ReadLine()" для аргумента "b" пишется в самом конце

2) почему там в Результате, сверху, под "Hello guys" пишет undefined

Помогите пожалуйста всё это исправить :(

Мой прошлый вопрос на stackoverflow: Почему последняя строчка "p = Console.ReadLine();" переноситься? Как это исправить?

Какой результат я хочу получить в итоге:

Answer 1

С undefined ответ простой. Проинициализируйте

 var done = "";

Сложнее это с запятыми. У вас всего одна запятая и вы по ней делите строку. Вот у вас и получается a, b где b это начало второго кусочка и ваш текст для замены добавляется в конец и первого и второго. Вот и все. Извините что не написал решения пишу с телефона того что вы хотите. Но если не помогут то постараюсь ответить завтра.

function TranslateIt() {
  firstTextarea = document.getElementById("1text_area");
  secndTextarea = document.getElementById("2text_area");

  secndTextarea.innerHTML =
    `<li>Hello guys</li>
  ` +
    firstTextarea.innerHTML.mreplace(/readln\((.+?)\);/gi, " = Console.ReadLine()")
}


String.prototype.mreplace = function(reg, res) {
  var done = "";
  firstStep = this.replace(reg, '$1');
  
  secondStep = firstStep.split(',');
  if (this.match(reg)) {
    for (let i = 0; i < secondStep.length; i++) {
      done += secondStep[i] + res + "</li><li>";
    }
    return done
  }
  return this;
};

ol {
  border: 1px solid black;
  resize: both;
  overflow: auto;
}

<button onclick="TranslateIt()">Click</button>
<div>
  <code>
        <ol
          id="1text_area"
          contenteditable
        ><li>Текст</li>
        <li>Текст</li>
        <li>Текст</li>
        <li>readln(a, b);</li>
        <li>Текст</li>
        <li>Текст</li>
        </ol>
      </code> Result:
  <code>
        <ol
          id="2text_area"
          contenteditable
        ></ol
      ></code>
</div>

Answer 2

Про undefined вам уже объяснили: если вы не присвоите значение переменной, а потом прибавите к ней строку, то undefined, как начальное «значение» переменной, будет преобразовано в строку и попадёт в её начало.

Что касается второй проблемы, вам нужно захватить только содержимое скобок и делить только его. Для вашего случая хорошо подойдёт использование replace() с функцией замены. Например, так:

function TranslateIt() {
  firstTextarea = document.getElementById("1text_area");
  secndTextarea = document.getElementById("2text_area");

  secndTextarea.innerHTML =
    `<li>Hello guys</li>
  ` +
    firstTextarea.innerHTML.mreplace(/<li>readln\((.+?)\);<\/li>/gi, " = Console.ReadLine()");
}


String.prototype.mreplace = function(reg, res) {
  if (this.match(reg)) {
    return this.replace(
      reg,
      (fullMatch, subgroup) => {
        return subgroup
                .split(', ')
                .map(letter => `<li>${letter}${res}</li>`)
                .join('');
      }
    );
  }
  return this;
};

ol {
  border: 1px solid black;
  resize: both;
  overflow: auto;
}

<button onclick="TranslateIt()">Click</button>
<div>
  <code>
        <ol
          id="1text_area"
          contenteditable
        ><li>Текст</li>
        <li>Текст</li>
        <li>Текст</li>
        <li>readln(a, b);</li>
        <li>Текст</li>
        <li>Текст</li>
        </ol>
      </code> Result:
  <code>
        <ol
          id="2text_area"
          contenteditable
        ></ol
      ></code>
</div>

БЛОГ НА HUSL

Проблемки со .split()

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