Question

我正在尝试交换来自 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>

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>

附加文档

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

4 个答案: