Text converter with javascript split() [closed]

I have bulk data in written text like this:

[e-mail]:token1 | Time = US | Alfabet = abc | EndToken = July 22, 2022 | Generate Since = July 2021 
[e-mail]:token2 | Time = US | Alfabet = bcd | EndToken = July 11, 2022 | Generate Since = June 2021
[e-mail]:token3 | Time = UK | Alfabet = dca | EndToken = July 11, 2022 | Generate Since = June 2020

How to make a tool with javascript by inserting bulk data into a text area then the result is in a modal popup with text result like this:

Convert Result/expected output:

+No.1
Email: [e-mail]
Token: token1
Time = US
Alfabet = abc
EndToken = July 22, 2022
Generate Since = July 2021
 
+No.2
Email: [e-mail]
Token: token2
Time = US
Alfabet = bcd
EndToken = July 11, 2022
Generate Since = June 2021

+No.3
Email: [e-mail]
Token: token3
Time = UK
Alfabet = dca
EndToken = July 11, 2022
Generate Since = June 2020

I made the input textarea look like this:

function convert() {
    document.getElementById("convertResult").value = "+No.1nEmail: [e-mail]: token1nTime = USnAlfabet = abcnEndToken = July 22, 2022nGenerate Since = July 2021nn+No.2nEmail: [e-mail]: token2nTime = USnAlfabet = bcdnEndToken = July 11, 2022nGenerate Since = June 2021nn+No.3nEmail: [e-mail]: token3nTime = UKnAlfabet = dcanEndToken = July 11, 2022nGenerate Since = June 2020nn";
}

  let buttonCopy = document.getElementById("copyResult"),
      input = document.getElementById("convertResult");

  buttonCopy.addEventListener("click", function(event) {
    event.preventDefault();
    input.select();
    document.execCommand("copy");
    alert("Result copied");
  });

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
  
  <form class="m-4">
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Paste bulk text data bellow</label>
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="8">
      [e-mail]:token1 | Time = US | Alfabet = abc | EndToken = July 22, 2022 | Generate Since = July 2021
      [e-mail]:token2 | Time = US | Alfabet = bcd | EndToken = July 11, 2022 | Generate Since = June 2021
      [e-mail]:token3 | Time = UK | Alfabet = dca | EndToken = July 11, 2022 | Generate Since = June 2020
      </textarea>
  </div>

  <button type="button" onclick="convert()" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Convert
</button>
</form>

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Convert Result</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <textarea id="convertResult" class="form-control" id="exampleFormControlTextarea1" rows="8"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" id="copyResult" class="btn btn-primary">Copy Result</button>
      </div>
    </div>
  </div>
</div>

The value entered will be like the code sample above, and the expected result will be like the code in the “Convert Result:” section.

Answer

This script will do that:

let $btn = document.querySelector('#convert')
$btn.addEventListener('click', function() {
    let inputArr = document.querySelector('#exampleFormControlTextarea1').value.split('n');
    let $result = document.querySelector('#exampleFormControlTextarea2')
    let number = 1    
    let final = []

    for (row of inputArr) {
        let rowArr = row.split(' | ')
        let first = rowArr.shift().split(':')
        let nrString = `+No.` + number
        let mail = `Email: ${first[0]}`
        let token = `Token: ${first[1]}`

        rowArr.unshift(nrString, mail, token);
        rowArr = rowArr.join('n')
        final.push(rowArr)
        number++
    }

    let finalText = final.join('nn')
    $result.value = finalText
})

See https://jsfiddle.net/qg2Lez0b/1/

You have to rename the second textarea to #exampleFormControlTextarea2 and give a id to the button convert.