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>