I have bulk data in written text like this:
useremail1@gmail.com:token1 | Time = US | Alfabet = abc | EndToken = July 22, 2022 | Generate Since = July 2021 useremail2@yahoo.com:token2 | Time = US | Alfabet = bcd | EndToken = July 11, 2022 | Generate Since = June 2021 useremail3@yahoo.com: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: useremail1@gmail.com Token: token1 Time = US Alfabet = abc EndToken = July 22, 2022 Generate Since = July 2021 +No.2 Email: useremail2@yahoo.com Token: token2 Time = US Alfabet = bcd EndToken = July 11, 2022 Generate Since = June 2021 +No.3 Email: useremail3@yahoo.com 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: useremail1@gmail.comnToken: token1nTime = USnAlfabet = abcnEndToken = July 22, 2022nGenerate Since = July 2021nn+No.2nEmail: useremail2@yahoo.comnToken: token2nTime = USnAlfabet = bcdnEndToken = July 11, 2022nGenerate Since = June 2021nn+No.3nEmail: useremail3@yahoo.comnToken: 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"> useremail1@gmail.com:token1 | Time = US | Alfabet = abc | EndToken = July 22, 2022 | Generate Since = July 2021 useremail2@yahoo.com:token2 | Time = US | Alfabet = bcd | EndToken = July 11, 2022 | Generate Since = June 2021 useremail3@yahoo.com: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">×</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.
Advertisement
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
.