Javascript 将电话号码填充到 3 个输入文本框中，名称相同但没有 id

Question

我本质上有一些奇怪的巫术东西我必须修复。

这个用于生成文本框的经典 asp 代码看起来像这样

<%i3_addPhoneFields "requestorPhone1","Phone <font class =txtMedium>:<font color = red>*</font></font>",i3_EmpPhoneNumber%>

我看到 OUTPUT View 源是

<input class="txtSmall" type="text" name="requestorPhone1" value="" size="3" maxlength="3">
<input class="txtSmall" type="text" name="requestorPhone1" value="" size="3" maxlength="3">
<input class="txtSmall" type="text" name="requestorPhone1" value="" size="4" maxlength="4">

1. 我不知道重复 3 次的名称是有效的 html
2. 我不能只为每个添加 ID
3. 出于多种原因，我不能直接更改所有这些代码。

我有电话号码的 JavaScript 变量，如下所示:

 (888) 433-3017

我所拥有的基本上是在 Jquery 中添加的

如果我这样做，那么所有 3 个文本框基本上都会获得相同的值(222 - 显然)

$('input[name="requestorPhone1"]').val('222');

目标

使用 javascript/jquery 和正则表达式并采取

(888) 433-3017

第一个文本框输入 888 ，第二个文本框输入 433 ，第三个文本框输入 3017

Answer 1

这是拆分数字然后将其填充到文本框中的一种方法:

function doIt() {
    var myString = "(123) 456-7890"; //hard-coded number for demo
    myString = myString.replace(/\D/g,''); //remove all non-numerics
    console.log(myString);

    //extract component parts from the full number string
    var first = myString.substr(0,3); //extract the first part of number
    var second = myString.substr(3,3); //second part
    var third = myString.substr(6,4); //third part
    console.log(first, second, third);

    //use jQuery's eq() to select specific elements in order
    $('input[name="requestorPhone1"]:eq(0)').val(first);
    $('input[name="requestorPhone1"]:eq(1)').val(second);
    $('input[name="requestorPhone1"]:eq(2)').val(third);
}

这里有 JSFiddle 演示:http://jsfiddle.net/hh2o1bek/

显然我已经对数字进行了硬编码，但这应该足以为您指明正确的方向。