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?

score 4 · Accepted Answer · answered Jun 21 '16 at 07:41

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>

Satpal · Answer 2 · 2016-06-21T07:44:51.477

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 '16 at 07:44

answered Jun 21 '16 at 07:38

Satpal

132,252
13
159
168

Do you have to append it? – Medet Tleukabiluly Jun 21 '16 at 07:41
@MedetTleukabiluly, Yes otherwise jQuery will throw error. – Satpal Jun 21 '16 at 07:41

score 1 · Answer 3 · answered Jun 21 '16 at 07:49

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.

Extract anchor tag href from string javascript/jquery

3 Answers3