JavaScript фильтрует массив значений <input>по количеству символов

Question

Это должно быть просто, но я ломаю голову над тем, почему этот кусочек JavaScript не работает для меня. Цель состоит в том, чтобы взять значение поля ввода (строку слов, разделенных пробелами), перечислить эти слова как элементы в массиве и удалить те, которые содержат не более 3 символов:

var typed = $('input').val();
var query = typed.split(" ");
var i=0;
for (i=0; i<query.length; i++) {
  if (query[i].length < 3) {
    query.splice(i,1);
  }
} 

Запустите onkeyup для поля ввода, и оно работает, но только в 50% случаев (строки из 1 и 2 символов иногда попадают в массив). Будем очень благодарны за любые предложения.

Answer 1

Проблема в том, что вы выполняете итерацию при удалении элементов. Рассмотрим этот массив:

["he", "l", "lo world"]

Изначально ваш цикл начинается с индекса 0 и удаляет "he" из массива. Теперь новый массив

["l", "lo world"]

На следующей итерации i будет 1, и вы проверите длину "lo world", игнорируя при этом строку "l".

Используйте метод filter в массиве для удаления нежелательных элементов.

var biggerWords = query.filter(function(word) {
    return word.length >= 3;
});

Answer 2

Попробуйте этот код, он избавится от любых трехсимвольных слов, а также убедится, что пустые элементы массива не созданы.

typed.replace(/(\b)\w{1,3}\b/g,"$1");
var query = typed.split(/\s+/);

Answer 3

Проблема в том, что вы нарезаете массив во время обратного отсчета. Подумайте об этом ... если вы берете индексную точку из массива, таким образом, сокращая ее на единицу, увеличивая i и переходя к следующей, вы на самом деле перемещаетесь на одну единицу дальше, чем вы хотите, полностью пропуская следующий индекс. Увеличьте i--, начните с query.length-1 и установите условие i>=0. Для примера этого в действии, проверьте это здесь:

http://jsfiddle.net/kcwjs/

CSS

input {
    width:300px;
}​

HTML

<input id="textbox" type="text" />
<div id="message"></div>​

Javascript

$(document).ready(function() {
    $('#textbox').keyup(checkStrings);
});

function checkStrings(e) {
    var typed = $('#textbox').val();

    if (typed == "") return false;

    var query = typed.split(" ");
    var querylen = query.length;
    var acceptedWords = '';
    var badWords = '';

    for (var i = querylen-1; i >= 0; i--) {
        if (query[i].length < 3) {
            badWords += query[i] + " ";            
        } else {
            acceptedWords += query.splice(i,1) + " ";
        }
    }

    $('#message').html("<div>Bad words are: " + badWords + "</div>" +
                       "<div>Good words are: " + acceptedWords + "</div>");
}

Answer 4

Помимо итерационной проблемы, вы также можете увидеть неожиданные записи, если вы введете несколько пробелов

попробовать

var query = typed.split(/\s+/);

Таким образом, он будет разбит на любое количество пробелов вместо каждого отдельного

Answer 5

эй, я думаю, вы должны использовать новый массив для результата.так как вы удаляете элемент в массиве.длина изменена.вот мое решение

var typed = "dacda cdac cd k foorar";
var query = typed.split(" ");
var i=0;
var result = [];
for (i=0; i<query.length; i++) {    
  if (query[i].length >= 3) {
    result.push(query[i]);
  }
}