将名字和姓氏翻转为姓氏名字

Question

I'm trying to swap the first names and last names of from textarea

Input: John Doe

Jane Doe

Joe Doe

Joan Doe

Jenny van Doe

Desired output: Doe, John

Doe, Jane

Doe, Joe

Doe, Joan

van Doe, Jenny

But getting: Doe Jane Doe Joe Doe Joan Doe Jenny van Doe, John

The logic is pretty simple, take the first string as first name and the rest as last name, if there are middename it will also be taken in as last name separated by a comma.

It is working with this code but only for a one liner. Hence if it's a list names from a textarea it will take first string as first name and assign the rest of the names to last name.

 var splitName = document.getElementById("splitName"); splitName.onclick = function() { var fullname = document.getElementById("fullName").value; console.log(fullname); var spaceIndex = fullname.indexOf(" "); var firstname; var lastname; if (spaceIndex == -1) { lastname = fullname; lastname = ""; } else { var firstname = fullname.substring(0, spaceIndex); var lastname = fullname.substr(spaceIndex + 1); } document.getElementById("result").innerHTML = lastname + ", " + firstname; };

 <div> <textarea cols="20" rows="5" id="fullName"></textarea> </div> <div id="splitName" class="hwbutton">Reverse</div> <div id="result"></div>

Answer 1

This is how I would do it.

 const rearrangeName = (name) => { // convert name string into array, split by spaces name = name.split(' ') // get first name const firstName = name[0] // reconnect the rest of the name by spaces // trim is just to remove trailing spaces const restOfName = name.slice(1).join(' ').trim() // return rearranged name, separated by comma return restOfName + ', ' + firstName } // Above is the main function. This following is just if you want to do // something with the DOM. const textArea = document.querySelector('textarea') const button = document.querySelector('button') const output = document.querySelector('.output') button.addEventListener('click', e => { // two \n's because that's how they're separated in textarea const values = textArea.value.split(/\n\n/g) // I'm just clearing out the old values if the user wants to try again. output.innerHTML = '' for (let i = 0; i < values.length; i++) { output.innerHTML += rearrangeName(values[i]) + '<br>' } })

 <textarea> John Doe Jane Doe Joe Doe Joan Doe Jenny van Doe </textarea> <button>Print formatted name to output</button> <div class="output"></div>

Answer 2

You can use split() to separate the lines and then use a loop.

 var splitName = document.getElementById("splitName"); splitName.onclick = function() { document.getElementById("result").innerHTML = ''; const value = document.getElementById("fullName").value; value.split('\n').forEach(fullname => { var spaceIndex = fullname.indexOf(" "); var firstname; var lastname; if (spaceIndex == -1) { lastname = fullname; lastname = ""; } else { firstname = fullname.substring(0, spaceIndex); lastname = fullname.substr(spaceIndex + 1); } document.getElementById("result").innerHTML += lastname + ", " + firstname + "<br>"; }); };

 <div> <textarea cols="20" rows="5" id="fullName">Jane Doe Joe Doe Joan Doe Jenny van Doe</textarea> </div> <div id="splitName" class="hwbutton">Reverse</div> <div id="result"></div>

Answer 3

Here is my version

 const splitName = document.getElementById("splitName"); splitName.addEventListener("click", function() { var fullnames = document.getElementById("fullName").value.split("\n"); document.getElementById("result").innerHTML = fullnames.map( name => { const [first, ...last] = name.trim().split(/ /); return `${last.join(" ")}, ${first}` }).join("<br>") });

 <div> <textarea cols="20" rows="5" id="fullName">John Doe Jane Doe Joe Doe Joan Doe Jenny van Doe</textarea> </div> <div id="splitName" class="hwbutton">Reverse</div> <div id="result"></div>

Answer 4

It's because you need to split the text on the carriage return. That way you get an array you can then iterate over. You can use a for-loop , but I updated your code a little using map , and a simple regular expression.

 // Cache the elements const splitName = document.getElementById('splitName'); const fullname = document.getElementById('fullName'); // We have a regex that finds first name match, and // then a match for the last name const regex = /([a-zA-Z]+) ([a-zA-Z ]+){1,}/; // -------first name ^, last name --^ splitName.addEventListener('click', handleClick, false); function handleClick() { // So now we need some names. We grab the value, trim off // any spaces, and then split the names into an array const names = fullname.value.trim().split('\n'); // Now, using `map` we can iterate over the array of names // and find matches. `match` also returns an array. The // first element is always the complete match, and the other // elements contain the matches we specified in our regex const result = names.map(name => { const match = name.match(regex); // So we ignore the first match, and the grab the next match // (first name), and then everything else (last name) const [, first, ...last ] = match; // And then return the new string return `${last}, ${first}`; }); console.log(result); };

 <div> <textarea cols="20" rows="5" id="fullName"> John Doe Jane Doe Joe Doe Joan Doe Jenny van Doe </textarea> </div> <div id="splitName" class="hwbutton">Reverse</div> <div id="result"></div>

Additional documentation

• Template literals

• match

• Destructuring assignment