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

Question

我正在尝试交换来自 textarea 的名字和姓氏

输入： 李四

李四

张三

无名氏

珍妮范多

期望的输出： 母鹿，约翰

母鹿，简

母鹿，乔

母鹿，琼

范·多伊，珍妮

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

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

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

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

我就是这样做的。

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 3

您可以使用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 4

因为你需要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，还有一个简单的正则表达式。

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

其他文档

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

Flip first name and last name to last name first name

javascript

string

reverse

swap

split