Dédoublonner un texte

Démo

Source

<style>
    #demo {
        background: #eee;
        padding: .5rem;
        border-radius: 0.25rem;
        text-align: center;
    }

    input[type=text] {
        padding: .2rem;
        border: 1px solid #a5a4a4;
        border-radius: 0.25rem;
        height: 1.5rem;
    }

    input[type=button], input[type=submit], input[type=reset] {
        border: none;
        color: #FFF;
        background: #963c7b;
        margin: .5rem 0;
        padding: .5rem;
        cursor: pointer;
        text-decoration: none;
        color: #FFF;
        border-radius: 0.25rem;
    }
    .textarea {
        height: 175px;
        width: 80%;
        border-radius: 4px;
        padding: .2rem;
        border: 1px solid #a5a4a4;
        display: inline-block;
        text-align: left;
        overflow:scroll;
    }

    .d {
        border-radius: 10px;
        width: 10px;
        height: 10px;
        display: inline-block;
        position: absolute;
        left: 2px;
        margin-top: 6px;
    }

    #diff {
        position: relative;
        padding-left: 20px;
    }

    #diff, #info {
        background: #eee;
    }
</style>
<div id="demo">
    <label>Source</label>
    <br/>
    <textarea class="textarea" id="src"></textarea>
    <br/>
    <input type="button" onclick="seek()" value="Dédoublonner" />
    <br/>
    <label>Résultat</label>
    <br/>
    <textarea class="textarea" id="res"></textarea>
    <br/>
    <label>Doublons</label>
    <br/>
    <div class="textarea" id="diff"></div>
    <br/>
    <label>Informations</label>
    <br/>
    <div class="textarea" id="info"></div>
</div>

<script>
    var colorList = ["#cf4c4c", "#cf854c", "#cfb14c", "#bccf4c", "#6fcf4c", "#4ccf9e", "#4ca2cf", "#4c51cf", "#a84ccf", "#cf4c9d"];
    var colorId = 0;

    function seek() {
        var data = document.getElementById("src").value;
        var dataDiff = [];
        var dataNew = "";
        var dataCount = [];
        var color = [];
        var html = "";
        var lineSrc = 0;
        var lineRes = 0;
        data = data.split("\n");
        lineSrc = data.length;
        for (var i = 0; i < data.length; i++) {
            //si pas dans le nouveau tableau
            if (dataDiff.indexOf(data[i]) == -1) {
                var idx = data.indexOf(data[i], i + 1);
                if (idx == -1) {
                    //1 seule fois
                    dataDiff[i] = data[i];
                    color[i] = 0;
                    dataNew += data[i] + "\n";
                    lineRes++;
                } else {
                    //plusieurs fois
                    dataDiff[i] = data[i];
                    dataColor = getColor();
                    color[i] = dataColor;
                    dataNew += data[i] + "\n";
                    lineRes++;
                    dataCount[data[i]] = 1;
                    while (idx != -1) {
                        dataDiff[idx] = data[idx];
                        color[idx] = dataColor;
                        idx = data.indexOf(data[i], idx + 1);
                        dataCount[data[i]]++;
                    }
                }
            }
        }

        for (var i = 0; i < dataDiff.length; i++) {
            if (color[i])
                html += "<span class='d' style='background:" + color[i] + "'></span>" + dataDiff[i] + "<br/>";
            else
                html += dataDiff[i] + "<br/>";
        }

        //clear old values
        document.getElementById("info").innerHTML = "";
        document.getElementById("res").value = "";

        //show new values
        document.getElementById("diff").innerHTML = html;
        document.getElementById("res").value = dataNew;

        //info
        document.getElementById("info").innerHTML += "Ligne source : " + lineSrc+ "<br/>";
        document.getElementById("info").innerHTML += "Ligne résultat : " + lineRes+ "<br/><br/>";
        for (x in dataCount) {
            document.getElementById("info").innerHTML += x + " : " + dataCount[x] + "<br/>";
        }

        colorId = 0;
    }

    function getColor() {
        var retColor;
        if (colorId < colorList.length) {
            retColor = colorList[colorId];
            colorId++;
        } else {
            retColor = rgbToHex(intRand(255), intRand(255), intRand(255));
        }
        return retColor;
    }

    function rgbToHex(r, g, b) {
        return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    }

    function intRand(max) {
        return Math.round(Math.random() * max);
    }
</script>