In the code below, is a[href^="/"] a regular expression?

Why does it have the ^ symbol and what does it do?

Which click events will it/won't it respond to?

$(document).on('click', 'a[href^="/"]', function(e) { 
     e.preventDefault(); 
     var href = $(e.currentTarget).attr('href'); 
     console.log('click ' + href); 
     Backbone.history.navigate(href, { trigger: true }); 
}); 

(code source)

In the code below, is a[href^="/"] a regular expression?

Why does it have the ^ symbol and what does it do?

Which click events will it/won't it respond to?

$(document).on('click', 'a[href^="/"]', function(e) { 
     e.preventDefault(); 
     var href = $(e.currentTarget).attr('href'); 
     console.log('click ' + href); 
     Backbone.history.navigate(href, { trigger: true }); 
}); 

(code source)

• javascript
• backbone.js

• 2 Duplicate? – Firedrake969 Commented Oct 2, 2015 at 2:53
• There's similarities but the questions aren't the same at all. – Leahcim Commented Oct 2, 2015 at 2:56
• The questions are essentially the same - "what does the ^= mean?" – Firedrake969 Commented Oct 2, 2015 at 2:58

3 Answers 3

Q. In the code below, is a[href^="/"] a regular expression?

R. No, it's not a regular expression. It's a (CSS based) jQuery selector.

Q. Why does it have the ^ symbol and what does it do?

It has this symbol because it means startsWith.

Q. Which click events will it/won't it respond to?

R. It will respond to any a tag that have an href attribute that starts with /.

Note: that Backbone code is probably using that selector to get all the internal links of the website and change their behavior to do client navigation, while the external links will start with http/https.

The ^ symbol indicates that the event will execute any link that begins with /

a[href^="/"] is a selector:

Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code.

The ^ symbol is kind of similar with the regex ^ anchor, although it's not really a regular expression. It's being used as a specific attribute selector:

6.3.2. Substring matching attribute selectors

Three additional attribute selectors are provided for matching substrings in the value of an attribute:

[att^=val]

Represents an element with the att attribute whose value begins with the prefix "val". If "val" is the empty string then the selector does not represent anything.

[att$=val]

Represents an element with the att attribute whose value ends with the suffix "val". If "val" is the empty string then the selector does not represent anything.

[att*=val]

Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything.

These are the selectors for element attributes (href is an attribute).

W3C spec: Selectors Level 3