[英]Split First name and Last name using JavaScript
我有一個名為Paul Steve Panakkal的用戶。 這是一個長名稱,它不適合 div 容器。 那么無論如何使用 JavaScript 或 jQuery 將名字和姓氏從中分離出來嗎?
該名稱是從 PHP 獲取到 JavaScript 中的變量中的。 然后使用 JS 對其進行拆分。
您應該使用String.prototype.split()
方法:
'Paul Steve Panakkal'.split(' '); // returns ["Paul", "Steve", "Panakkal"]
你可以這樣使用它:
'Paul Steve Panakkal'.split(' ').slice(0, -1).join(' '); // returns "Paul Steve"
'Paul Steve Panakkal'.split(' ').slice(-1).join(' '); // returns "Panakkal"
所以共同點:
var firstName = fullName.split(' ').slice(0, -1).join(' ');
var lastName = fullName.split(' ').slice(-1).join(' ');
是的:
var fullName = "Paul Steve Panakkal".split(' '),
firstName = fullName[0],
lastName = fullName[fullName.length - 1];
參考:
在西班牙語中,這可能很棘手,因為您可能有第二個可選名稱,甚至是復雜的姓氏,如“del Bosque”或“de la Hoya”、帶有重音符號的元音和ñ 。 以下 javascript 能夠解析完整的西班牙名稱,因為您在編寫它時會考慮大寫和小寫。 它會返回一個json給你
代碼是:
function parseName(input) {
var fullName = input || "";
var result = {};
if (fullName.length > 0) {
var nameTokens = fullName.match(/[A-ZÁ-ÚÑÜ][a-zá-úñü]+|([aeodlsz]+\s+)+[A-ZÁ-ÚÑÜ][a-zá-úñü]+/g) || [];
if (nameTokens.length > 3) {
result.name = nameTokens.slice(0, 2).join(' ');
} else {
result.name = nameTokens.slice(0, 1).join(' ');
}
if (nameTokens.length > 2) {
result.lastName = nameTokens.slice(-2, -1).join(' ');
result.secondLastName = nameTokens.slice(-1).join(' ');
} else {
result.lastName = nameTokens.slice(-1).join(' ');
result.secondLastName = "";
}
}
return result;
}
如果您要指定第二個名字,則姓氏是必需的。 試試看:
甚至嘗試一個復雜的,比如
評論你的經歷。
我認為,是時候開始使用正則表達式了 :)
"Paul Steve Panakkal".split(/(\s).+\s/).join("") // "Paul Panakkal"
最常見的解決方案,我們總是將第一個單詞作為名字,其余的作為姓氏:
const splitName = (name = '') => { const [firstName, ...lastName] = name.split(' ').filter(Boolean); return { firstName: firstName, lastName: lastName.join(' ') } } console.log(splitName('Jon Snow')); console.log(splitName(' Jon ')); console.log(splitName(' Jon The White Wolf '));
Speransky Danil 的答案的擴展版本,它處理提供的字符串中只有一個單詞的情況。
/**
* Gets the first name, technically gets all words leading up to the last
* Example: "Blake Robertson" --> "Blake"
* Example: "Blake Andrew Robertson" --> "Blake Andrew"
* Example: "Blake" --> "Blake"
* @param str
* @returns {*}
*/
exports.getFirstName = function(str) {
var arr = str.split(' ');
if( arr.length === 1 ) {
return arr[0];
}
return arr.slice(0, -1).join(' '); // returns "Paul Steve"
}
/**
* Gets the last name (e.g. the last word in the supplied string)
* Example: "Blake Robertson" --> "Robertson"
* Example: "Blake Andrew Robertson" --> "Robertson"
* Example: "Blake" --> "<None>"
* @param str
* @param {string} [ifNone] optional default value if there is not last name, defaults to "<None>"
* @returns {string}
*/
exports.getLastName = function(str, ifNone) {
var arr = str.split(' ');
if(arr.length === 1) {
return ifNone || "<None>";
}
return arr.slice(-1).join(' ');
}
我嘗試了下面的代碼,它對我來說很酷
var full_name = 'xyz abc pqr';
var name = full_name.split(' ');
var first_name = name[0];
var last_name = full_name.substring(name[0].length.trim());
在上面的例子中:
(1)
If full_name = 'xyz abc pqr';
first_name = "xyz";
last_name = "abc pqr";
(2)
If `full_name = "abc"`:
Then first_name = "abc";
and last_name = "";
一位評論者說如果想要名字是“保羅”而姓氏是“史蒂夫·帕納卡爾”怎么辦?
var name = "Paul Steve Panakkal" // try "Paul", "Paul Steve" var first_name = name.split(' ')[0] var last_name = name.substring(first_name.length).trim() console.log(first_name) console.log(last_name)
如果您假設最后一個單詞是姓氏並且單個單詞名稱也是姓氏,那么...
var items = theName.split(' '),
lastName = items[items.length-1],
firstName = "";
for (var i = 0; i < items.length - 1; i++) {
if (i > 0) {
firstName += ' ';
}
firstName += items[i];
}
注意邊緣情況,例如僅提供名字或輸入兩個或多個空格。 如果您只想解析名字和姓氏,這將解決問題(全名應始終包含至少 1 個字符以避免將 first_name 設置為空字符串):
var full_name_split = "Paul Steve Panakkal".split(" ");
var first_name = full_name_split[0];
var last_name = full_name_split.length > 1 ? full_name_split[full_name_split.length - 1] : null;
有很多方法可以存檔這個。
我認為最簡單的方法是拆分並彈出姓氏。
let fullname = 'Paul Steve Panakkal'; // from php let tmpArray = fullname.split(' '); //split the name to an array const lastname = tmpArray.pop(); // pop the last element of the aray and store it in "lastname" variable const firstname = tmpArray.join(' '); // join the array to make first and middlename and store it in "firstname" variale console.log("firstname:", firstname) console.log("lastname:", lastname)
使用此代碼:
您需要更改行: splitFullName("firstName","lastName","fullName");
並確保它包含表單中正確的字段 ID。
function splitFullName(a,b,c){
String.prototype.capitalize = function(){
return this.replace( /(^|\s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase(); } );
};
document.getElementById(c).oninput=function(){
fullName = document.getElementById(c).value;
if((fullName.match(/ /g) || []).length ===0 || fullName.substring(fullName.indexOf(" ")+1,fullName.length) === ""){
first = fullName.capitalize();;
last = "null";
}else if(fullName.substring(0,fullName.indexOf(" ")).indexOf(".")>-1){
first = fullName.substring(0,fullName.indexOf(" ")).capitalize() + " " + fullName.substring(fullName.indexOf(" ")+1,fullName.length).substring(0,fullName.substring(fullName.indexOf(" ")+1,fullName.length).indexOf(" ")).capitalize();
last = fullName.substring(first.length +1,fullName.length).capitalize();
}else{
first = fullName.substring(0,fullName.indexOf(" ")).capitalize();
last = fullName.substring(fullName.indexOf(" ")+1,fullName.length).capitalize();
}
document.getElementById(a).value = first;
document.getElementById(b).value = last;
};
//Initial Values
if(document.getElementById(c).value.length === 0){
first = document.getElementById(a).value.capitalize();
last = document.getElementById(b).value.capitalize();
fullName = first + " " + last ;
console.log(fullName);
document.getElementById(c).value = fullName;
}
}
//Replace the ID's below with your form's field ID's
splitFullName("firstName","lastName","fullName");
來源:http: //developers.marketo.com/blog/add-a-full-name-field-to-a-marketo-form/
您無需使用任何拆分方法並為該操作創建不必要的數組。 只需使用 javascript 的lastIndexOf和substring方法。
var s = "Paul Steve Panakkal";
var a = s.lastIndexOf(' '); // last occurence of space
var b = s.substring(0, a); // Paul Steve
var c = s.substring(a+1); // Panakkal
const fullName = 'Paul Steve Panakkal'.split(' '); const lastName = fullName.pop(); // 'Panakkal' const firstName = fullName.join(' '); // 'Paul Steve' console.log(firstName); console.log(lastName);
使用以下代碼,它適用於我
let name = "Paul Steve Panakkal" let parts = name.split(' ') let firstName = parts.shift(); // Paul let lastName = parts.join(' '); // Steve Panakkal console.log({ firstName, lastName })
var firstName = fullName.split(" ")[0];
另一種選擇可能是使用正則表達式。
\w+\s\w+(?=\s)|\w+
上面的正則表達式將找到匹配兩個或三個命名類型組合的firstName
和lastName
字符串模式。
const regex = /\w+\s\w+(?=\s)|\w+/g; const name1 = 'Paul Steve Panakkal'; const [firstName1, lastName1] = name1.trim().match(regex); console.log(`${firstName1} | ${lastName1}`); const name2 = 'John Doe'; const [firstName2, lastName2] = name2.trim().match(regex); console.log(`${firstName2} | ${lastName2}`);
細節
\w+
匹配任何單詞字符。?=\s
匹配任何空白字符但不捕捉它。如果您的意思是姓氏是名字之后的所有名字,只需使用:
var name = "Paul Steve Panakkal";
var arrName = name.split(" ");
var firstName = arrName.slice(0, 1).join(' ');
var lastName = arrName.slice(1, arrName.length).join(' ');
這樣,firstName 和 lastName 總是正確的
var names = fullName.split(' ');
if (!names || names.length <= 1) {
firstName = this.name;
lastName = '';
} else {
firstName = names.slice(0, -1).join(' ');
lastName = names.slice(-1).join(' ');
}
var fullName = "Paul Steve Panakkal";
您可以使用 split 函數拆分全名,然后拆分結果,例如在數組或列表中顯示元素。
這就是您使用 split 功能時發生的情況。
fullName.split(" ")
["Paul", "Steve", "Panakkal"]
這不會保存到任何變量中。 您可以執行拆分功能並將元素分配給這樣定義明確的變量。
var firstName = fullName.split(" ")[0];
var lastName = fullName.split(" ")[1];
var otherName = fullName.split(" ")[2];
我想出了這個邏輯:
const fullName = "Paul Steve Panakkal";
const idx = fullName.lastIndexOf(' ');
const firstName = idx !== -1 ? fullName.substring(0, idx) : fullName;
const lastName = idx !== -1 ? fullName.substring(idx + 1) : '';
console.log('firstName:', firstName, 'lastName:', lastName);
輸出:
firstName: Paul Steve lastName: Panakkal
" Paul Steve ".trim().split(/(\s).+\s/).join("") // 'Paul Steve'
您應該添加trim()以防用戶不小心輸入了額外的空格!
如果您希望姓氏是名字之后的所有名字:
function splitFirstLast(name) {
return {
firstName: name.indexOf(' ') !== -1 && name.substring(0, name.indexOf(' ')) || name,
lastName: name.indexOf(' ') !== -1 && name.substring(name.indexOf(' ') + 1) || ''
}
}
對象可以通過一個簡單的函數來解決問題:
const fullName = "Edgar Allan Poe" const formatter = (name) => { const splitedName = name.trim().split(' ') if(splitedName.length === 0) return "" //here happens the hack!, it prevents duplicate names //JS objects overrides duplicate keys, very useful here const output = { [splitedName[0]]: splitedName[0], //storing first key [splitedName[splitedName.length - 1]]: splitedName[splitedName.length - 1] //storing last key (whose may be first key) } return Object.keys(output).join(' ').trim() //now convert object keys into a string. "E pronto rs" } console.log(formatter(fullName)) // "Edgar Poe" console.log(formatter("Elias")) // "Elias" console.log(formatter("")) // ""
此函數會將任何名稱分解為名字和姓氏,將最后一個單詞存儲為姓氏,將其他所有內容存儲為名字。 它返回一個包含分隔名稱的對象:
function parseName(fullName) { const name = fullName.split(' ') const person = {} if (name.length > 1) { person.lastName = name.pop() person.firstName = name.join(' ') } else { person.lastName = "" person.firstName = obj.name } return person } console.log(parseName("Ashak Zahin Hasan")) // { firstName: "Ashak Zahin", lastName: "Hasan" }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.