Extract anchor tag href from string javascript/jquery

Question

I've a requirement where I need to extract the 1st href from a string.

Let's say I've a string this way :

var LinkString="Google Link Is:<a href='www.Google.com' target='_blank' style='text-decoration:none; color:#000000;'>URL</a>";

Now I need to find all the anchor tags from that string and extract the first anchor tag's href.

I've followed this sample from here and have tried finding the anchor tag from the string.

But I'm unable to get the first element's href.

var LinkString="Google Link Is:<a href='www.Google.com' target='_blank' style='text-decoration:none; color:#000000;'>URL</a>";
    var output = LinkString.split(/(?=<a)/)[1];

I've also tried creating a DOM element from the output anchor tag but unable to get the exact href by following the procedure from here

My requirement is to get the Google.com as a final output.

Can anyone help me getting the href?

Jai · Accepted Answer · 2016-06-21 07:41:35Z

4

You have to use a virtual html element such as div to place the html string value in it then you can target the anchor to extract the href:

var htm="Google Link Is:<a href='www.Google.com' target='_blank' style='text-decoration:none; color:#000000;'>URL</a>";
var href = $('<div>').append(htm).find('a:first').attr('href');
console.log(href)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Jun 21, 2016 at 7:41

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Satpal · Accepted Answer · 2016-06-21 07:44:51Z

3

You can create DOM element then extract the anchor

var LinkString="Google Link Is:<a href='www.Google.com' target='_blank' style='text-decoration:none; color:#000000;'>URL</a>";
var firstAnchor = $('<div></div>').append(LinkString).find('a:first');
console.log(firstAnchor.prop('outerHTML')); //Get HTML
console.log(firstAnchor.attr('href')); //Get href attribute
console.log(firstAnchor.prop('href')); //Get href property

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Jun 21, 2016 at 7:44

answered Jun 21, 2016 at 7:38

Satpal

134k13 gold badges168 silver badges171 bronze badges

2 Comments

Medet Tleukabiluly Over a year ago

Do you have to append it?

Satpal Over a year ago

@MedetTleukabiluly, Yes otherwise jQuery will throw error.

pinturic · Accepted Answer · 2016-06-21 07:49:33Z

1

You can do this way jsfiddle:

var LinkString="Google Link Is:<a href='www.Google.com' target='_blank' style='text-dec`oration:none; color:#000000;'>URL</a>";

var dom = jQuery.parseHTML("<div>" + LinkString + "</div>");
console.log(dom);
console.log($(dom).find("[href]").attr("href"));

This searches for dom elements that have the href attribute and prints the first href found.

answered Jun 21, 2016 at 7:49

pinturic

2,2631 gold badge17 silver badges31 bronze badges

Collectives™ on Stack Overflow

Extract anchor tag href from string javascript/jquery

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related