sk89q · October 20, 2014 06:02 · shape55 · Apr 19, 2017
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <title>Deduplicate Spotify tracks based on track artist and title</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 <style>
 body {
    padding: 40px;
 }
 #input {
    width: 90%;
    height: 200px;
    border: 2px solid red;
    overflow: auto;
 }
 #output {
    width: 90%;
    height: 200px;
 }
 </style>
 </head>
 <body>

 <div class="container">
    <h1>Deduplicate Spotify tracks (based on track name)</h1>

    <p>Drag your playlist into here:</p>
    <div id="input" contenteditable="true"></div>

    <br>

    <p>Then click this button: <button class="btn btn-primary" id="deduplicate">Deduplicate</button></p>

    <hr>

    <h2>Results</h2>

    <p>Then drag/paste this into your playlist (after clearing your playlist):</p>
    <textarea id="output"></textarea>

    <p><span class="label label-info">Tip:</span> The input box above now lists tracks that were removed.</p>

    <hr>

    <p>By <a href="http://twitter.com/sk89q">@sk89q</a></p>
 </div>

 <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
 <script>
 var $input = $("#input");
 var $output = $("#output");

 $("#deduplicate").on("click", function (e) {
    var found = {};
    var results = [];
    var left = [];

    $input.find("a").each(function () {
        var $this = $(this);
        var name = $this.text();
        var url = $this.attr('href');

        if (!found.hasOwnProperty(name)) {
            found[name] = url;
            results.push(url);
            $this.remove();
        } else {
            left.push($this);
            left.push("<br >");
        }
    });

    $input.empty().append(left);
    $output.val(results.join("\n"));
 });
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Deduplicate Spotify tracks based on track artist and title</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<style>
	body {
	padding: 40px;
	}
	#input {
	width: 90%;
	height: 200px;
	border: 2px solid red;
	overflow: auto;
	}
	#output {
	width: 90%;
	height: 200px;
	}
	</style>
	</head>
	<body>

	<div class="container">
	<h1>Deduplicate Spotify tracks (based on track name)</h1>

	<p>Drag your playlist into here:</p>
	<div id="input" contenteditable="true"></div>

	<br>

	<p>Then click this button: <button class="btn btn-primary" id="deduplicate">Deduplicate</button></p>

	<hr>

	<h2>Results</h2>

	<p>Then drag/paste this into your playlist (after clearing your playlist):</p>
	<textarea id="output"></textarea>

	<p><span class="label label-info">Tip:</span> The input box above now lists tracks that were removed.</p>

	<hr>

	<p>By <a href="http://twitter.com/sk89q">@sk89q</a></p>
	</div>

	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script>
	var $input = $("#input");
	var $output = $("#output");

	$("#deduplicate").on("click", function (e) {
	var found = {};
	var results = [];
	var left = [];

	$input.find("a").each(function () {
	var $this = $(this);
	var name = $this.text();
	var url = $this.attr('href');

	if (!found.hasOwnProperty(name)) {
	found[name] = url;
	results.push(url);
	$this.remove();
	} else {
	left.push($this);
	left.push("<br >");
	}
	});

	$input.empty().append(left);
	$output.val(results.join("\n"));
	});
	</script>

	</body>
	</html>