How to find the href path of the anchor tag using jquery?

Question

How can I get and check if the href path contain image path or some other link using jquery. For Example:

<a href="image.png"><img src="image.png"/></a>

In the above example anchor text contain the image src then only jquery function should work to find the href path.i.e., Fetch the href path only when anchor text contain img tag.

I reviewed the .has in jquery api for checking the image. But how can i check if the href contain image path or some other path. Something i am going to do based on SO User's Suggestion, like.

<script type="text/javascript">
                            jQuery(document).ready(function($) {
                                if (jQuery('a').has("img")) {  // it return the no. of img tag within a
                                    jQuery('a').has("img").prop('href', '#');
                                }

                            });
                        </script>

See the Above script do the action to check if anchor text contain image tag then only # on href link of anchor tag. By the same way to add like to do the above script to check if the href contain any image path or link. If the Image Path Contain on href then the above script should execute or else it won't.

Any Possible Reason For @Downvoters.?

Is it possible to do in jquery, Any Suggestion would be much appreciated.

you could use a regex test the extension of the href. ex `/\.(png|gif/jpg|jpeg)$/i.test(href)` — Arun P Johny, Jul 09 '13 at 09:06

score 6 · Accepted Answer · answered Jul 09 '13 at 09:09

6

you can do

$('a:has(img)').click(function(){
    var href = this.href; //or $(this).attr('href')
    if(/\.(png|gif|jpg|jpeg)$/i.test(href)){
        alert('do')
    }
})

answered Jul 09 '13 at 09:09

Arun P Johny

384,651
66
527
531

score 2 · Answer 2 · edited May 23 '17 at 12:26

2

First find the href using attr() jQuery function:

var href = $link.attr('href');

Then you have to verify if the href is an image using the indications from the answers of this question.

edited May 23 '17 at 12:26

Community

1
1

answered Jul 09 '13 at 09:08

Ionică Bizău

109,027
88
289
474

score 2 · Answer 3 · answered Jul 09 '13 at 09:08

2

Use attr - documentation here.

Example:

My Link

console.log($('#myLink').attr("href"));

answered Jul 09 '13 at 09:08

James

13,092
1
17
19

score 2 · Answer 4 · answered Jul 09 '13 at 09:09

2

var href = $('a').attr('href');

or

var href = $('a').prop('href');

answered Jul 09 '13 at 09:09

Jayamurugan

1,757
2
14
34

score 2 · Answer 5 · answered Jul 09 '13 at 09:10

2

First you must select the link e.g

<a href="link" id="ourlink" ></a>

Then you can use the attr method to get or set href

$("#ourlink").attr('href'); // Here you get it
$("#ourlink").attr('href','anotherlink'); //here you set it

answered Jul 09 '13 at 09:10

Shady Atef

2,121
1
22
40

score 2 · Answer 6 · answered Jul 09 '13 at 09:10

2

Do somthing like this-

var url = $('a').attr('href');

if(verify url is of type image here){
//true

}
else{
//false

}

answered Jul 09 '13 at 09:10

Srikanth Kshatriy

444
1
4
10

score 1 · Answer 7 · answered Jul 09 '13 at 09:13

1

Use regexp to check for strings in the href attribute:

var patt=/(png|jpg|gif)/g;
if(patt.test($('a').attr('href'))){
//do something if image
} else {
//do something else
}

answered Jul 09 '13 at 09:13

HarryFink

1,010
1
6
6

captainsac · Answer 8 · 2013-07-09T09:26:57.640

1

You can test the attribute of anchor tag and check using regex that href has a file with extension of an image file.

        //Get the value of href attribute of anchor tag
        var anchorHref = $("a:has(img)").attr("href");

        //Check the extention of the file
        if((/\.(gif|jpg|jpeg|tiff|png|bmp)$/i).test(anchorHref))
        {
            alert("It is Image Path"); 
        }

edited Jul 09 '13 at 09:26

answered Jul 09 '13 at 09:19

captainsac

2,484
3
27
48

How to find the href path of the anchor tag using jquery?

8 Answers8