输入框格式名称

Question

我正在尝试创建一个页面，其中第二个输入框将某人的名字、中间名和姓氏格式化为第一个首字母、中间名、最后一个首字母。因此，例如，如果有人输入“Will Joe Smith”，输出将是 W. Joe S.，它会出现在输入框旁边。不过，我完全坚持这个功能。这是我目前所拥有的：

onja = document.getElementById("but0");
onja.onclick = convertName;

onjb = document.getElementById("buta");
onjb.onclick = fnli;

function convertName() {
  var input = document.getElementById("name");
  var name = input.value;
  var spaceIndex = name.indexOf(" ");
  var firstName = name.substring(0, spaceIndex);
  var lastName = name.substring(spaceIndex + 1);
  /* lastName = lastName.toUpperCase();*/

  var firstInitial = firstName.charAt(0);
  input.value = lastName + ", " + firstInitial;

  var s = " ";
  objspan = document.getElementById("span1");


  for (var k = 0; k < firstName.length; k++) {
    if (k % 2 == 0) {
      var position = firstName.length - k - 1;

      var smid = firstName.charAt(position);
      s = s + smid;
    }
  }
  var s1 = " ";
  for (var k = 0; k < lastName.length; k++) {
    if (k % 2 == 0) {
      var position = lastName.length - k - 1;
      var s1mid = lastName.charAt(position);
      s1 = s1 + s1mid;
    }
  }

  objspan.innerHTML = s + s1;
}

function fnli() {

  var input = document.getElementById("name1");
  var name = input.value;
  var spaceIndex = name.indexOf(" ");
  var firstName = name.substring(0, spaceIndex);
  var lastName = name.substring(spaceIndex + 4);
  var p1 = name.substring(spaceIndex + 1, spaceIndex + 2);

  st = firstName.substring(0, 1);
  stm = p1;
  st1 = lastName.substring(0, 1);

  stf = st + " ." + stm + "." + st1 + ".";
  spanp = document.getElementById("span2");
  spanp.innerHTML = stf;
}

<html>

<head>
  <script src="split.js" defer></script>
</head>

<body>
  <h1>Name Converter</h1>
  <p>Type your name:</p>

  <div>
    <input id="name" type="text" size="24" /> </br>
    <span id="span1">second output goes here</span></br>
    <button id="but0">Convert to last, First</button> </br>
    </br>

    <button id="buta"> Convert From Name MI. Lname to FI.MI.LI.</button></br>
    <input id="name1" type="text" size="24" />
    <span id="span2">Third output goes here</span>
  </div>
</body>
</html>

Answer 1

您可以 split 名称，以便获得每个部分的数组。

从那里，您可以使用索引获取名字和姓氏的首字母（如果您愿意，也可以使用 charAt or substring）：

const carl = "Carl"
console.log(carl[0]) // "C"
console.log(carl.charAt(0)) // "C"
console.log(carl.substring(0, 1)) // "C"

然后全部加起来。

const name = 'Carl Bob Jones'
// Get an array of all parts of the name by splitting at the spaces
const parts = name.split(' ')
// Add it all together, taking the first letter for first and last name
const result = `${parts[0][0]}. ${parts[1]} ${parts[2][0]}.`

console.log(result)

Answer 2

使用split()函数，使用指定的分隔符将字符串分割成数组，例如space.

onjb = document.getElementById("buta");
onjb.onclick = fnli;

function fnli() {

  var input = document.getElementById("name1");
  var name = input.value;
  var [firstName, middleName, lastName] = name.split(" ");

  st = firstName.substring(0, 1);
  stm = middleName;
  st1 = lastName.substring(0, 1);

  stf = st + ". " + stm + " " + st1 + ".";
  spanp = document.getElementById("span2");
  spanp.innerHTML = stf;
}

<html>

<head>
  <script src="split.js" defer></script>
</head>

<body>
  <h1>Name Converter</h1>
  <p>Type your name:</p>

  <div>
    <button id="buta"> Convert From Name MI. Lname to FI.MI.LI.</button></br>
    <input id="name1" type="text" size="24" />
    <span id="span2">Third output goes here</span>
  </div>
</body>
</html>

输入框格式名称

Input Box Formatting Names

html

javascript

input

inputbox