1

I'm using someone else's app and want to change the innerHTML in between any < a>< /a> tag that has a certain href. But these links don't have a class or ID associated with them and I can't edit the code to give them classes or ID's. Is there a way to grab a tag by its href in JavaScript? I wanted to do something similar to this:

var theLink = document.getElementByHref("example.com");

Otherwise, if that is not possible, can I loop through all the links in the page and choose the ones that have the certain href and innerHTML I'm looking for?

The Unknown Dev
  • 3,039
  • 4
  • 27
  • 39

10 Answers10

2

You can use a DOM3-attribute-selector (jQuery doc) to get all elements that contain a certain text in their href attribute. It would look like

$('a[href*="example.com"]')

However, that might not be what you actually want - not only urls to that domain might contain this string. You might do something like begins-with:

$('a[href^="http://example.com"]')

but to get an exact and possibly more complex match, you don't get around a custom filter:

$('a[href]').filter( function() {
     return this.hostname == "example.com";
     // or check other properties of the anchor element
})
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
1

Select all elements that have the example.com value in href attribute:

Live Demo: http://jsfiddle.net/NTGQz/

$('a[href*="example.com"]');

You can also try this, just to be more specific and following the OP "ideal" answer:

Live Demo: http://jsfiddle.net/ksZhZ/

jQuery.fn.getElementsByHref = function(str){ return $('a[href*="' + str + '"]'); };

$(document).ready(function(){        
   elems = $(this).getElementsByHref('example.com');
});
Oscar Jara
  • 14,129
  • 10
  • 62
  • 94
0

jQuery has a lot of selectors. The one you want here is the attribute selector.

$('a[href="example.com"')
Corey Ogburn
  • 24,072
  • 31
  • 113
  • 188
0

You can use an attribute selector:

$('a[href="http://example.com"]')
kinakuta
  • 9,029
  • 1
  • 39
  • 48
0

With JQuery attribute selector, you can do this :

$('a[href="example.com"]')
blue112
  • 52,634
  • 3
  • 45
  • 54
0

Try this

$('a[href*="example.com"]');

This will select the link that has example.com in the href attribute..

Sushanth --
  • 55,259
  • 9
  • 66
  • 105
0
$('a[href="http:google.com"]')
Baz
  • 36,440
  • 11
  • 68
  • 94
Tom G
  • 3,650
  • 1
  • 20
  • 19
0

you can do it with jquery: http://api.jquery.com/attribute-equals-selector/

ex: linksToGoogle = $('a[href="http://google.com"]');

skyrail
  • 139
  • 1
  • 7
0

You can do this without jQuery.

var links = document.querySelectorAll('a[href*="example.com"]');
Intelekshual
  • 7,444
  • 1
  • 21
  • 28
0

You can do this natively with querySelectorAll if your users are on IE8+ or any other browser. This method returns an NodeList of matching elements.

document.querySelectorAll('a[href="exact/value.html"]');    // exact match
document.querySelectorAll('a[href*="partial/value.html"]'); // partial match
document.querySelectorAll('a[href^="starts/with"]');        // href starts with
document.querySelectorAll('a[href$=".html"]');              // href ends with
Paul S.
  • 64,864
  • 9
  • 122
  • 138