Select which href ends with some string

Question

Is it possible using jQuery to select all <a> links which href ends with "ABC"?

For example, if I want to find this link <a href="http://server/page.aspx?id=ABC">

tvanfosson · Accepted Answer · 2014-07-14T15:59:54.267

1633

   $('a[href$="ABC"]')...

Selector documentation can be found at http://docs.jquery.com/Selectors

For attributes:

= is exactly equal
!= is not equal
^= is starts with
$= is ends with
*= is contains
~= is contains word
|= is starts with prefix (i.e., |= "prefix" matches "prefix-...")

edited Jul 14 '14 at 15:59

answered Nov 20 '08 at 00:26

tvanfosson

524,688
99
697
795

22

something changed recently. $('[href$=-abc]') used to work. Now it requires quotes $('[href$="-abc"]') I don't know when it changed. Maybe it was always supposed to require quotes and just happened to work before. – gman Jul 25 '11 at 07:34
13

Note that "ABC" is case-sensitive! (Just spent quite some time to figure that one out...) – Louis Somers May 24 '12 at 11:09
How to get href does not contains ABC in jquery – sf.dev Apr 30 '14 at 22:07
3

@sf.dev `$('a').filter(function() { return !this.href || !this.href.match(/ABC/); });` – tvanfosson May 01 '14 at 01:37
9

This works with vanilla javascirpt now. You can simply use `document.querySelectorAll('a[href$="ABC"]')` to achieve this. – k-nut Mar 01 '15 at 19:28
`!=` is not a valid attribute selector – bitten Oct 26 '16 at 08:41
@bitten the question is about jQuery attribute selectors. It is a valid conditional operation in jQuery. – tvanfosson Oct 26 '16 at 13:41
if someone is trying to use a `var` `var name = "ABC"; $('a[href$='+name+']')` – Arun Jan 31 '19 at 17:14

score 24 · Answer 2 · edited Dec 05 '11 at 17:17

24

$('a[href$="ABC"]:first').attr('title');

This will return the title of the first link that has a URL which ends with "ABC".

edited Dec 05 '11 at 17:17

James Hill

60,353
20
145
161

answered Jun 24 '10 at 21:01

Ash

241
2
2

4

Correction: Which ends with ABC – sparkyspider Aug 22 '11 at 15:46
Actually, there is a slight difference. This will select the first link with given href, which is useful if you need to change only one. – alekwisnia Mar 15 '12 at 14:45

score 16 · Answer 3 · edited Feb 29 '12 at 15:42

16

$("a[href*='id=ABC']").addClass('active_jquery_menu');

edited Feb 29 '12 at 15:42

Brandon

68,708
30
194
223

answered Feb 29 '12 at 08:27

Sumit

161
1
2

2

For future visitors who may be helped by that answer. – sscirrus Apr 24 '13 at 17:52
@Sumit note that your answer is only correct if the OP's `ABC` happens to refer to an ID. – sscirrus Apr 24 '13 at 17:54

score 6 · Answer 4 · edited Feb 21 '13 at 07:59

6

$("a[href*=ABC]").addClass('selected');

edited Feb 21 '13 at 07:59

Anujith

9,370
6
33
48

answered Sep 20 '12 at 14:53

Ganesh Anugu

61
1
2

score 5 · Answer 5 · answered May 21 '19 at 07:57

Just in case you don't want to import a big library like jQuery to accomplish something this trivial, you can use the built-in method querySelectorAll instead. Almost all selector strings used for jQuery work with DOM methods as well:

const anchors = document.querySelectorAll('a[href$="ABC"]');

Or, if you know that there's only one matching element:

const anchor = document.querySelector('a[href$="ABC"]');

You may generally omit the quotes around the attribute value if the value you're searching for is alphanumeric, eg, here, you could also use

a[href$=ABC]

but quotes are more flexible and generally more reliable.

Select which href ends with some string

5 Answers5

Linked

Related