输入框格式名称

编程问答 2022-05-12

问题描述

我正在尝试创建一个页面，其中第二个输入框将某人的名字、中间名和姓氏格式化为第一个首字母、中间名、最后一个首字母。例如，如果有人输入“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>

解决方法

使用 split() 函数使用指定的分隔符（例如空格）将字符串拆分为数组。

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>

,

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

从那里，您可以使用索引获取名字和姓氏的第一个字母（如果您愿意，也可以使用 charAt 或 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)

htmlinputinputinputboxjavascript