Execute function if href begins with word - No jQuery

Question

I am wondering if it is possible to execute a function using just the beginning of a href, for example:

I have the following href...

<a class="title" href="example-1.html"></a>

...and wish to do the following:

var href = document.querySelector('.title').getAttribute('href');

window.onload function(){
if (href === "example/./.html"){
 /* do something */
 }
}

OR

var href = document.querySelector('.title').getAttribute('href');

window.onload function(){
of (href.beginsWith === "example"){
/* do something */
 }
}

I don't know if they are near something possible but hopefully they give an idea of what I'd like to do. Please only Vanilla JavaScript thank you.

Thanks in advance!

What you have is the basis of executing a function when the page loads. Do you want that, or do you want it to execute when the link is clicked? — Reinstate Monica Cellio, Mar 27 '18 at 11:23
Are you just asking [how to check if JavaScript string begins with another string](https://stackoverflow.com/questions/646628/how-to-check-if-a-string-startswith-another-string)? — Rup, Mar 27 '18 at 11:25
@Archer I do wish for it to execute onload, just need the first part of the href to be recognized before executing because other divs need to use the same beginning. It's so I don't have to create a million variables. — KAindex, Mar 27 '18 at 11:26
@Rup In theory yes, however, the compatibility is apparently poor. I don't mind writing more script, just wondering if there is a way. — KAindex, Mar 27 '18 at 11:31
Startswith? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith - even comes with a polyfill — Pete, Mar 27 '18 at 11:33

score 3 · Accepted Answer · answered Mar 27 '18 at 11:28

Yes, you can easily get the value of the href attribute (as you are — and you want the attr, not the property; the property will have been expanded into its full form) and use startsWith, or startsWith combined with endsWith, or a regular expression:

var href = document.querySelector('.title').getAttribute('href');
window.onload = function(){
    if (href.startsWith("example")) { // 
        /* do something */
    }
};

or that if might be

    if (href.startsWith("example") && href.endsWith(".html")) { //

or with a regex:

    if (/^example.*\.html$/i.test(href)) { //

I don't recommend waiting for the load event, though, it happens very late in the page load process.

Also be sure to do the var href = document.querySelector('.title').getAttribute('href'); in a script tag at the end of the document, just before the closing </body> tag.

Also note the = in the above, along with at least one } that was missing.

Finally: startsWith and endsWith were added in ES2015, so any vaguely-up-to-date browser should have them, but (for instance) no version of IE (not even IE11) does. The links above have polyfills you can use if you need IE support.

Thank you this worked perfectly. Wondering though, how early of a browser version will be compatible with a polyfill? I have neither heard of them before nor used one. — KAindex, Mar 27 '18 at 11:41
@KAindex: A [polyfill](https://en.wikipedia.org/wiki/Polyfill_(programming)) is something you put in place on browsers that don't have native support for it. The polyfills on the MDN pages would work on any browser released this century (although really it should use `Object.defineProperty` if available rather than direct assignment to add to `String.prototype`). — T.J. Crowder, Mar 27 '18 at 11:58

score 2 · Answer 2 · answered Mar 27 '18 at 11:29

2

You can do a search for elements by attribute, which seems to be exactly what you need for this. This will find all anchor tags with a href value that begins with example

var exists = document.querySelector("a[href^='example'") !== null;

if (exists) {
    /* do something */
}

or in short...

window.onload = function() {
    if (document.querySelector("a[href^='example'") !== null) { 
        /* do something */
    }
};

answered Mar 27 '18 at 11:29

Reinstate Monica Cellio

25,975
6
51
67

How is the compatibility of this? – KAindex Mar 27 '18 at 11:37
@KAindex That will always be a valid question, but this is pretty stable (apart from the usual suspect - IE)... https://www.caniuse.com/#search=querySelector – Reinstate Monica Cellio Mar 27 '18 at 11:44

score 0 · Answer 3 · answered Mar 27 '18 at 11:31

You can check it with indexOf(), see working example:

var href = document.querySelector('.title').getAttribute('href');
console.log(href);

window.onload = function() {
  if (href.indexOf("example") === 0) {
    console.log("Found!");
  }
}

<a class="title" href="example.html">sample link</a>

Note there is also startsWith() but it does not work in some older browsers, while indexOf() has been around forever.

Execute function if href begins with word - No jQuery

3 Answers3