如何解决将名字和姓氏翻转为姓氏名字
我正在尝试交换来自 textarea 的名字和姓氏
输入: 约翰·杜
简·多伊
小乔
琼·杜
珍妮范多伊
期望的输出: 多恩,约翰
多恩,简
小乔
多伊,琼
范多,珍妮
但是得到: Doe Jane Doe Joe Doe Joan Doe Jenny van Doe,约翰
逻辑很简单,把第一个字符串作为名字,其余的作为姓氏,如果有middename也会被当作姓氏,用逗号隔开。
它正在使用此代码,但仅适用于一个班轮。因此,如果它是来自 textarea 的列表名称 它将把第一个字符串作为名字,并将其余的名字分配给姓氏。
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>
解决方法
这就是我要做的。
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>
您可以使用 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>
这是我的版本
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>
这是因为你需要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>
附加文档
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。