Question

I’ve been trying on and off all afternoon with no luck. What I need to be able to do is take the href="" value of a link and store it in a new variable or new attribute (inside the a), but having had the http:// removed beforehand. This would keep the href value the same so that it still points to the link but I have a version without the http:// as well.

So far, this is the code i’ve tried:

$("a[href]").each(function() {
    var link = $(this).replace('http://', '');
});

I think this is correct but I’m not very good at jQuery or JS so I’d really appreciate if someone could finish it off/start from scratch 🙂

Eventually, I want to be able to put the link without the http:// into a pseudo-element of the a, using a:before.

I have a jsfiddle as well.

Thank you very much to anyone who helps me out.

Answer 1

Just use this.href instead of $(this).

If you want to handle https as well as http, you can use a regex:

var link = this.href.replace(/^https?:\/\//, '');

Also, since you want to display this value in a :after pseudo-element, store link in a data attribute. That way, you can grab the value directly from CSS:

$("a[href]").each(function() {
    var link = this.href.replace(/^https?:\/\//, '');

    $(this).attr('data-href', link);
});

And then change your CSS to:

a:before {
    content: 'This link goes to ' attr(data-href);

Demo: http://jsfiddle.net/dSHH4/1/