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

Question

我正在尝试从 textarea 交换名字和姓氏

输入： John Doe

简·多伊

乔·多伊

琼·多伊

珍妮·范·多伊

所需的 output： Doe，John

能源部，简

能源部，乔

多伊，琼

范多伊，珍妮

但得到： Doe Jane Doe Joe Doe Joan Doe Jenny van Doe, John

逻辑很简单，取第一个字符串为名字，rest 为姓氏，如果有中间名也取为姓氏，用逗号隔开。

它正在使用此代码，但仅适用于一个班轮。 因此，如果它是来自 textarea 的列表名称，它将把第一个字符串作为名字并将名称的 rest 分配给姓氏。

 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

我就是这样做的。

 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

您可以使用split()分隔行，然后使用循环。

 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

这是我的版本

 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

这是因为您需要在回车符上split文本。 这样你就可以得到一个数组，然后可以迭代。 您可以使用for-loop ，但我使用map和一个简单的正则表达式稍微更新了您的代码。

 // 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>

附加文件

• 模板文字

• match

• 解构赋值