Question

我想复制以下情况：

我有一个字符串，让我们说

 123BCP456GF789

我想将其分成两半，并要求用户插入缺失的数字并验证它是否正确。

会是这样的：

123B <ion-input></ion-input> F789

我正在使用Angular 2和Ionic 2来做这件事，如果有人可以帮助我，我很感激。

假设我有这个数组：

numberList = ['123BCP456GF789', '46487951', '65135564', '46489633'];

          <ion-list>
                <ion-item>
                    <ion-label stacked primary>Complete with the mising number</ion-label>
                    <ion-item>{{numberList_firstpart}}</ion-item>
                    <ion-input></ion-input>
                    <ion-item>{{numberList_lastpart}}</ion-item>
                </ion-item>
          </ion-list>

谢谢！

Answer 1

独立于AngularJs的简单解决方案可以是：

var numberList = ['123BCP456GF789', '46487951', '65135564', '46489633'];

numberList.forEach(function(element) {

    //total length of the string
    var elLength = element.length;

    //get the max number of characters usable for first and second part
    var singleElementLength = Math.ceil(elLength/3);

    //the first part of the string
    var firstPart = element.substring(0, singleElementLength);

    //the last part of the string
    var lastPart = element.substring(element.length-singleElementLength, element.length);

    //this one should be entered by user
    var middlePart = element.replace(firstPart, '').replace(lastPart, '');

    console.log(firstPart);
    console.log(middlePart);
    console.log(lastPart);


});

输出将是：

"123BC"
"P456"
"GF789"

"464"
"87"
"951"

"651"
"35"
"564"

"464"
"89"
"633"

如果您愿意，可以使用Math.floor()代替Math.ceil()：执行此操作会导致中间部分更长，请参阅以下输出：

"123B"
"CP456G"
"F789"

"46"
"4879"
"51"

"65"
"1355"
"64"

"46"
"4896"
"33"

请注意：要使用此方法，您必须包含至少3个字符的字符串（可能更多，取决于您在Math.ceil()和Math.floor()之间使用的字符）。我建议你为此添加一些控件。

Answer 2

你的任务是双重的：

捕获用户输入，
将用户输入与正确答案进行比较

为了捕获用户输入，只要用户键入文本，它就会绑定数据条目，例如

<ion-input (keyup)="captureInput($event)"></ion-input>

捕获数据输入的方法不止一种。这取决于您想要与正确答案进行比较的时间（例如，点击按钮，失去焦点等）。

最后一部分是与正确答案的比较，我认为你可以通过标准的Javascript正则表达式测试来解决，例如..

/the correct answer/.test(`${ this.first_part }${ this.input }${ this.last_part }`)

您的实际实施将决定编码细节，但希望您了解我所说的内容。

希望这有帮助。

拆分字符串并使用Angular 2和Ionic验证它

2 个答案: