输入框格式名称
[英]Input Box Formatting Names
问题描述
I am trying to create a page where the second input box formats someone's first, middle, and last name put in to first intial, middle name, last initial.
我正在尝试创建一个页面，其中第二个输入框将某人的名字、中间名和姓氏格式化为第一个名字，中间名，最后一个名字。 So for example if someone puts in "Will Joe Smith" the output will be W. Joe S. and it will appear next to the input box.例如，如果有人输入“Will Joe Smith”，则 output 将是 W. Joe S.，它会出现在输入框旁边。 I'm completely stuck on the function for this though.不过，我完全被 function 困住了。 Here is what I have so far:这是我到目前为止所拥有的：
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>
2 个解决方案
解决方案1
2 已采纳 2021-04-22 20:57:11
Use the split() function to split a string into an array using a specified delimiter such as space.使用split() function 使用指定的分隔符（例如空格）将字符串拆分为数组。
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
0 2021-04-22 20:55:10
You can split the name so that you get an array of each part.您可以拆分名称，以便获得每个部分的数组。
From there, you can get the first letter of the first and last name by using the index (or use charAt or substring if you prefer):从那里，您可以使用索引获取名字和姓氏的第一个字母（如果您愿意，也可以使用charAt或substring ）：
const carl = "Carl" console.log(carl[0]) // "C" console.log(carl.charAt(0)) // "C" console.log(carl.substring(0, 1)) // "C"
Then add it all together.然后把它们加在一起。
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)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.