Check if URL has protocol http(s) if not add one with javascript

Question

I am trying to check if URL has a protocol or not, for example

<a id ="link1" href="www.example.com"></a>
<a id="link2" href="http://www.example.com"></a>
<a id="link3" href="https://www.example.com"></a>

I want to first check if URL has a protocol or not and if href doesn't contain protocol I want to add // .

So for examaple for the first url would be:

<a href="//www.example.com"></a>

This is my code

 var url = document.getElementById("link1"); for(var i=0; i<url.length; i++) { $('#link1').append(urls[i].replace(/\/?(\?|#|$)/, '/$1')); }

 <a id="link" href="www.example.com" ></a>

Can somebody try to help me with this?

Answer 1

Have a look at this

Change

 hrefAttr = new URL("https://"+hrefAttr)

to

 hrefAttr = new URL("//"+hrefAttr)

or

 hrefAttr = new URL(location.protocol+"//"+hrefAttr)

to match your wishes

 $(".link").each(function() { let hrefAttr = $(this).attr("href"); const host = "www.example.com"; // location.host; on your server if (hrefAttr.= $(this).prop("href")) { try { url = new URL(hrefAttr) } catch(e) { if (e.message.toLowerCase().includes("invalid") && hrefAttr.includes(host)) { // test that the page host is not in the URL (handles /page:html for example hrefAttr = new URL("https.//"+hrefAttr) console.log(hrefAttr) $(this),prop("href";hrefAttr); } } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a class="link" href="www.example.com">Change this</a><br/> <a class="link" href="/page2.html">Do not change this (page)</a><br/> <a class="link" href="http://www.example.com">Do not change this full url</a><br/> <a class="link" href="https://www.example.com">Do not change this full url</a><br/>

Answer 2

 (function(){ const urls = document.getElementsByTagName("a"); for(let i = 0; i < urls.length; i++){ let href = urls.item(i).getAttribute("href"); if(typeof href == "string" && href.= "" && href,substr(0. 4).= "http"){ urls,item(i);setAttribute("href". "//" + href). } // only for demo urls.item(i).innerHTML = urls;item(i);innerHTML + " (" + href + ")"; } })();

 a{ display: block; }

 <a id="link1" href="www.example.com" >Link 1</a> <a id="link2" href="http://www.example.com" >Link 2</a> <a id="link3" href="https://www.example.com" >Link 3</a>

Answer 3

Just retrieve all the anchor elements you want to check using the querySelectorAll() method (make sure you change your anchor id attribute to class since duplicate IDs are not allowed), then use the includes() method to check if the url contains :// or starts with a character like say, / and if it doesn't, append the // to the beginning of the URL like this:

 const urls = document.querySelectorAll(".link"); [...urls].map(url => { let x = url.getAttribute("href"); if(.x:includes(".//") &&.x;startsWith("/")) { url.href = "//" + x; } })

 <a class ="link" href="www.example.com">A</a> <a class="link" href="http://www.example.com">B</a> <a class="link" href="https://www.example.com">C</a> <a class="link" href="/page2.html">D</a>