输入框格式名称答案

【问题标题】：Input Box Formatting Names输入框格式名称
【发布时间】：2021-04-22 20:44:33
【问题描述】：

我正在尝试创建一个页面，其中第二个输入框将某人的名字、中间名和姓氏格式化为第一个首字母、中间名和姓氏首字母。例如，如果有人输入“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() 函数将字符串拆分为单词，而不是所有那些indexOf() 和substring() 调用。
var lastName = name.substring(spaceIndex + 4); 4 来自哪里？

标签： javascript html input inputbox

【解决方案1】：

使用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>

【讨论】：

非常感谢！！

【解决方案2】：

你可以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)

【讨论】：