javascript - 搜索、计算重复字符串并添加每个数字

Question

我有一个脚本正在数组中搜索重复的文本字符串并更改颜色。

function checkDuplicates() {
    var values = new Array();
    var $input = $('input[type=\'text\']');
    var error = 0;
    $input.each(function() {
        $(this).removeClass('double-error');
        var that = this;
        if (that.value!='') {
            values[that.value] = 0;
            $('input[type=\'text\']').each(function() {
                if (this.value == that.value) {
                    values[that.value]++;
                    }
                });
            } //endif
        });

    $input.each(function(key) {
        if (values[this.value]>1) {
            error++;
            $(this).addClass('double-error');
            }
        });

    return (error <= 0); //returns false or true
    }

<style type="text/css">
    .double-error {
        color:red;
        border:1px solid red;
        }
</style>

这工作正常。

<小时/>

但是，我需要计算重复的字符串，并添加跟踪它们是否是该单词的第一次出现、该单词的第二次出现等。

例如:

给定 john, john, peter, doe, peter, john，结果将是 john-1, john-2, peter-1, doe, peter-2, john- 3.

<小时/>

这是我目前拥有的:

function eliminateDuplicates() {
    var values = new Array();
    var $input = $('input[type=\'text\']');
    var error = 0;

    $input.each(function() {
        $(this).removeClass('double-error');
        var that = this;
        if (that.value!='') {
            values[that.value] = 0;
            $('input[type=\'text\']').each(function() {
                if (this.value == that.value) {
                    values[that.value]++;
                }
            });
        }
    });

    $input.each(function(key) {
        if (values[this.value]>1) {
            error++;
            myArray = values[this.value];
            for (var i = 0; i < myArray; i++) {
                $(this).parent()
                .find('input[type=\'text\']')
                .val(this.value + '-' + i);
                } 
            }
        });

    return error <= 0; //return error > 0 ? false : true;
    }

但是我得到了这个结果:

john-0-1-2, john-0-1-2, peter-0-1, doe, peter-0-1, john-0-1-2

出了什么问题？

<小时/>

我做了一些修改:

function eliminateDuplicates() {
        var values = new Array();
    var $input = $('input[type=\'text\']');
    var error = 0;
    $input.each(function() {
        $(this).removeClass('double-error');
        var that = this;
        if (that.value!='') {
            values[that.value] = 0;
            $('input[type=\'text\']').each(function() {
                if (this.value == that.value) {
                    values[that.value]++;
                }
            });
        }
    });

    $input.each(function(key) {
        if (values[this.value]>1) {
            var name=this.value;
            var names = values[this.value];
                values[this.value]++;
            for (var i = 0; i < names; i++){
        $(this).parent().find('input[type=\'text\']').val(name + '-' + i);
            }


        }

    });
checkDoubles();
    return error <= 0; //return error > 0 ? false : true;
}

现在我按顺序获得计数，但不是从 1 开始。 例如，如果我有 4 个重复的名字(Peter)，我得到:

Peter-3, Peter-4, Peter-5, Peter-6. but I need Peter-1, Peter-2, Peter-3, Peter-4. what wrong?

Answer 1

我认为您正在寻找这样的东西:

function eliminateDuplicates() {

    var repeats = {};
    var error = false;

    //cache inputs
    var $inputs = $("input[type='text']");

    //loop through inputs and update repeats
    for (i = 0; i < $inputs.length; ++i) {
        //cache current element
        var cur = $inputs[i];

        //remove class
        $(cur).removeClass("double-error");

        //get text of this element
        var text = $(cur).val();

        //no text -- continue
        if (text === "") {
            continue;
            }
        //first time we've came across this value -- intialize it's counter to 1
        if ((text in repeats) === false) {
            repeats[text] = 1;
            }
        //repeat offender. Increment its counter.
        else {
            repeats[text] = repeats[text] + 1;
            }

        //update the the value for this one
        $(cur).val(text + "-" + repeats[text]);
        }

    return error; // always returns false since I'm not sure
                  // when it's supposed to return true.
    }

<小时/>

PS:我不明白error什么时候应该是true，所以它总是false 。尽管如此，这应该足以让您继续前进。

PPS: Plunker here.