Проверьте, есть ли в URL протокол http (s), если нет, добавьте его с javascript

Question

Я пытаюсь проверить, имеет ли URL-адрес протокол или нет, например

<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>

Я хочу сначала проверить, имеет ли URL-адрес протокол или нет, и если href не содержит протокол, я хочу добавить //.

Так, например, для первого URL-адреса будет:

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

Это мой код

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>

Может кто-нибудь попробовать мне с этим помочь?

Answer 1

(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 2

Просто извлеките все элементы привязки, которые вы хотите проверить, с помощью метода querySelectorAll() (убедитесь, что вы изменили свой атрибут привязки id на class, поскольку повторяющиеся идентификаторы не допускаются), затем используйте includes ( ) метод, чтобы проверить, содержит ли URL-адрес :// или начинается с символа, например, /, а если нет, добавьте // в начало URL-адреса следующим образом:

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>

Answer 3

Посмотрите на это

Измените

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

на

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

или

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

в соответствии с вашими пожеланиями

$(".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/>