Skip to main content
Title spelling. Removed [web-scraping] tag. Added [html] tag.
Link

JQuery Clyp AutombedAuto-embed

Stack Snippet; reindented according to the JSfiddle; edited tags
Source Link
200_success
  • 145.6k
  • 22
  • 191
  • 481

HTML:

<a href="https://clyp.it/5e0dmibw" rel="nofollow" target="_blank">https://clyp.it/5e0dmibw</a>

JS:

$(document).ready(function() {
    var clyplinks = $('a[href^="https://clyp.it/"]').filter(function() {
        return this.innerHTML.match(/(https:\/\/clyp.it\/)([\w]{8})/);
    });
    $(clyplinks).each(function(index) {

        var x = null;
        var id = $(this).attr("href").split("it/")[1];
        var e = $('<a class="embed" id="' + id + index +'" href="#"> [embed]</a>').insertAfter($(this));
        e.click(function(evt) {
            evt.preventDefault();
            if (x != 1) {
                $(this).after('<div id="clyp' + id + index + '"><iframe width="259" height="160" src="https://clyp.it/' + id + '/widget" frameborder="0" ></iframe></div>')
                $(e).html('<a class="embed" id="' + id + index +'" href="#"> [remove]</a>')
                x = 1;
                console.log('embed' + x + ' ' + index);
            } else {
                $('#clyp' + id + index).detach();
                $(e).html('<a class="embed" id="' + id + index +'" href="#"> [embed]</a>')
                x = null;
                console.log('yay' + x + ' ' + index);

            }

        });

    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<a href="https://clyp.it/5e0dmibw" rel="nofollow" target="_blank">https://clyp.it/5e0dmibw</a>
$(document).ready(function() {
var clyplinks = $('a[href^="https://clyp.it/"]').filter(function() {
return this.innerHTML.match(/(https:\/\/clyp.it\/)([\w]{8})/);
});
$(clyplinks).each(function(index) {

var x = null;
var id = $(this).attr("href").split("it/")[1];
var e = $('<a class="embed" id="' + id + index + '" href="#"> [embed]</a>').insertAfter($(this));
e.click(function(evt) {
  evt.preventDefault();
  if (x != 1) {
    $(this).after('<div id="clyp' + id + index + '"><iframe width="259" height="160" src="https://clyp.it/' + id + '/widget" frameborder="0" ></iframe></div>')
    $(e).html('<a class="embed" id="' + id + index + '" href="#"> [remove]</a>')
    x = 1;
    console.log('embed' + x + ' ' + index);
  } else {
    $('#clyp' + id + index).detach();
    $(e).html('<a class="embed" id="' + id + index + '" href="#"> [embed]</a>')
    x = null;
    console.log('yay' + x + ' ' + index);

  }

});

});
});
 

HTML:

<a href="https://clyp.it/5e0dmibw" rel="nofollow" target="_blank">https://clyp.it/5e0dmibw</a>

JS:

$(document).ready(function() {
var clyplinks = $('a[href^="https://clyp.it/"]').filter(function() {
return this.innerHTML.match(/(https:\/\/clyp.it\/)([\w]{8})/);
});
$(clyplinks).each(function(index) {

var x = null;
var id = $(this).attr("href").split("it/")[1];
var e = $('<a class="embed" id="' + id + index + '" href="#"> [embed]</a>').insertAfter($(this));
e.click(function(evt) {
  evt.preventDefault();
  if (x != 1) {
    $(this).after('<div id="clyp' + id + index + '"><iframe width="259" height="160" src="https://clyp.it/' + id + '/widget" frameborder="0" ></iframe></div>')
    $(e).html('<a class="embed" id="' + id + index + '" href="#"> [remove]</a>')
    x = 1;
    console.log('embed' + x + ' ' + index);
  } else {
    $('#clyp' + id + index).detach();
    $(e).html('<a class="embed" id="' + id + index + '" href="#"> [embed]</a>')
    x = null;
    console.log('yay' + x + ' ' + index);

  }

});

});
});

$(document).ready(function() {
    var clyplinks = $('a[href^="https://clyp.it/"]').filter(function() {
        return this.innerHTML.match(/(https:\/\/clyp.it\/)([\w]{8})/);
    });
    $(clyplinks).each(function(index) {

        var x = null;
        var id = $(this).attr("href").split("it/")[1];
        var e = $('<a class="embed" id="' + id + index +'" href="#"> [embed]</a>').insertAfter($(this));
        e.click(function(evt) {
            evt.preventDefault();
            if (x != 1) {
                $(this).after('<div id="clyp' + id + index + '"><iframe width="259" height="160" src="https://clyp.it/' + id + '/widget" frameborder="0" ></iframe></div>')
                $(e).html('<a class="embed" id="' + id + index +'" href="#"> [remove]</a>')
                x = 1;
                console.log('embed' + x + ' ' + index);
            } else {
                $('#clyp' + id + index).detach();
                $(e).html('<a class="embed" id="' + id + index +'" href="#"> [embed]</a>')
                x = null;
                console.log('yay' + x + ' ' + index);

            }

        });

    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<a href="https://clyp.it/5e0dmibw" rel="nofollow" target="_blank">https://clyp.it/5e0dmibw</a>
 

Source Link
mzrt
  • 53
  • 3

JQuery Clyp Autombed

This function finds links from Clyp.it and offers users a link to embed the content. Please let me know what you think of it. It works, but probably has some redundancies and inefficiencies.

HTML:

<a href="https://clyp.it/5e0dmibw" rel="nofollow" target="_blank">https://clyp.it/5e0dmibw</a>

JS:

$(document).ready(function() {
var clyplinks = $('a[href^="https://clyp.it/"]').filter(function() {
return this.innerHTML.match(/(https:\/\/clyp.it\/)([\w]{8})/);
});
$(clyplinks).each(function(index) {

var x = null;
var id = $(this).attr("href").split("it/")[1];
var e = $('<a class="embed" id="' + id + index + '" href="#"> [embed]</a>').insertAfter($(this));
e.click(function(evt) {
  evt.preventDefault();
  if (x != 1) {
    $(this).after('<div id="clyp' + id + index + '"><iframe width="259" height="160" src="https://clyp.it/' + id + '/widget" frameborder="0" ></iframe></div>')
    $(e).html('<a class="embed" id="' + id + index + '" href="#"> [remove]</a>')
    x = 1;
    console.log('embed' + x + ' ' + index);
  } else {
    $('#clyp' + id + index).detach();
    $(e).html('<a class="embed" id="' + id + index + '" href="#"> [embed]</a>')
    x = null;
    console.log('yay' + x + ' ' + index);

  }

});

});
});

JSFiddle:

https://jsfiddle.net/1svgq6g4/