JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrapper">
<textarea id="fld" class="field"></textarea>
<button id="btn" class="button" onclick="cleanUp();">Remove</button>
</div>
<!-- end .wrapper -->
CSS
/*-----------------------------------*\
RESET
\*-----------------------------------*/
* {
vertical-align: baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
border: none;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
}
a {
text-decoration: none;
}
/*-----------------------------------*\
STYLES
\*-----------------------------------*/
body {
background-color: #fff;
font: 100%/1.8'Helvetica Neue', serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.wrapper {
max-width: 640px;
width: 640px;
margin: 50px auto;
position: relative;
}
.field {
width: 640px;
height: 345px;
resize: none;
background-color: #eaeaea;
border-radius: 3px;
padding: 10px;
font-size: 12px;
font-family:'Monaco';
color: #444;
}
.button {
background-color: #333;
border-radius: 3px;
padding: 13px 20px;
cursor: pointer;
color: #fff;
text-transform: uppercase;
margin: 15px 0 0 0;
}
JavaScript
function cleanUp() {
var text = document.getElementById("fld"),
textVal = text.value,
array;
textVal = textVal.replace(/\r/g, " ");
array = textVal.split(/\n/g);
text.value = removeDuplicatesInPlace(array).join("\n");
}
var removeDuplicatesInPlace = function (arr) {
var i, j, cur, found;
for (i = arr.length - 1; i >= 0; i--) {
cur = arr[i];
found = false;
for (j = i - 1; !found && j >= 0; j--) {
if (cur === arr[j]) {
if (i !== j) {
arr.splice(i, 1);
}
found = true;
}
}
}
return arr;
};