Convert jQuery to Javascript
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi I want to remove jquery from my site and need this converted to pure javascript

jQuery(document).ready(function() {
jQuery("a").on('click', function(event) {

   var target = jQuery(this).attr("target");
   var url = jQuery(this).attr("href");
   var theclass = jQuery(this).attr("class");
    if(url == '#' || url == '' ||  theclass == 'sb-toggle-left'){
    return true;
    }
    else if(url.startsWith("waze") || url.startsWith("tel") || url.startsWith("mail")){
     window.open(url,"_system"); 
         return false;

    }
    else{
    event.stopImmediatePropagation();
    event.preventDefault();

   if(target == '_blank' || target == 'blank' ){

    openinwindow(url);

    return false;

  }else{

var querystring = 'wordapp_mobile_app=app';

if(url.startsWith("waze") || url.startsWith("tel") || url.startsWith("mail")){

}else{
url = url + '' + (url.match(/\?/) ? '&' : '?') + querystring;
}
self.location = url;
}

  }

});
});

In what browsers do you need it to work with?
philklc 28 days ago
awarded to chesedo

Crowdsource coding tasks.

4 Solutions


// excuse the formatting, done on my phone

document.addEventListener("DOMContentLoaded", function(event) {
    var callback = function(e) {
        var e = window.e || e; var aElm = e.target;
        if (e.target.tagName !== 'A') return;

        var target = aElm.getAttribute("target");
        var url = aElm.getAttribute("href");
        var theclass = aElm.className;
        if(url == '#' || url == '' ||  theclass == 'sb-toggle-left'){
            return true;
         }
         else if(url.startsWith("waze") || url.startsWith("tel") || url.startsWith("mail")){
             window.open(url,"_system"); 
             return false;
         }
        else{
            e.stopImmediatePropagation();
            e.preventDefault();

           if(target == '_blank' || target == 'blank' ){

                openinwindow(url);

                return false;

          }else{

            var querystring = 'wordapp_mobile_app=app';
            if(url.startsWith("waze") || url.startsWith("tel") || url.startsWith("mail")){

            }else{
                url = url + '' + (url.match(/\?/) ? '&' : '?') + querystring;
            }
            self.location = url;
        }

    };

    if (document.addEventListener)
        document.addEventListener('click', callback, false);
    else
        document.attachEvent('onclick', callback);
});

Instead of using startsWith, use this instead (regex has faster performance):

/^(tel|mail|waze)/.test(url)

This will return a boolean (true or false).

--Regex actually has slower performance than direct manipulation-- (This seems browser dependent and IE does not support startWith anyway). But those comparisons should probably be refactored into a function.
chesedo 28 days ago
Winning solution

Hi, here is my JS for the JQ.
Note that openinwindow is not defined in my JS (like in the JQ) and also that the code for that one if statement is missing.

(function() {
    var links = document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = clickFn;
    }
})();

function clickFn(e) {
    var url = this.getAttribute('href');

    if(url === '#' || url === '' || this.className === 'sb-toggle-left') {
        return true;
    } else if (UrlStartSpecial(url)) {
        window.open(url, '_system');
        return false;
    } else {
        e.stopImmediatePropagation();
        e.preventDefault();

        if(this.target == '_blank' || this.target == 'blank' ){
            openinwindow(url);
            return false;
        }else{
            var querystring = 'wordapp_mobile_app=app';

            if(UrlStartSpecial(url)){

            } else {
                url = url + (url.match(/\?/) ? '&' : '?') + querystring;
            }
            self.location = url;
        }
    }
}

function UrlStartSpecial(url) {
    return /^(tel|mail|waze)/.test(url);
}

if(!String.prototype.startsWith){
    String.prototype.startsWith = function(searchString, position){
        position = position || 0;

        return this.substr(position, searchString.length) === searchString;
    };
}

(function davesargentModule() {
    "use strict";

    function documentReady(fn) {
        if(document.readyState !== "loading"){
            fn();
        }else{
            document.addEventListener("DOMContentLoaded", fn);
        }
    }

    function linkClickHandler(event) {
        var link = event.target;
        var target = link.getAttribute("target");
        var url = link.getAttribute("href");
        var theclass = link.className;

        if(url === "#" || url === "" || theclass === "sb-toggle-left"){
            return true;
        }else if(url.startsWith("waze") || url.startsWith("tel") || url.startsWith("mail")){
            window.open(url, "_system");

            return false;
        }else{
            event.stopImmediatePropagation();
            event.preventDefault();

            if(target === "_blank" || target === "blank"){
                openinwindow(url);

                return false;
            }else{
                var querystring = "wordapp_mobile_app=app";
                if(url.startsWith("wave") || url.startsWith("tel") || url.startsWith("mail")){

                }else{
                    url = url + "" + (url.match(/\?/) ? "&" : "?") + querystring;
                }

                self.location = url;
            }
        }
    }

    documentReady(function onDomReady() {
        document.addEventListener("click", function onClick(event) {
            if(event.target.tagName !== "a"){
                return true;
            }

            linkClickHandler(event);
        });
    });
}());
View Timeline