如何在JavaScript中搜索没有https协议的链接

Question

I need to write some JavaScript which identifies any links within that page that aren't using the https protocol and only have http. Once it has found them it needs to change the font of the link to yellow, or if the link is an image, give it a yellow border. I've written some code which searches through the page and collects the a tags, but I'm not sure how to get it to specify only the links which do NOT use https. I've tried using the .protocol on the href but I can tell this is wrong (I'm still learning!) I'm guessing regex would be a good place to start but I don't have the faintest idea how to search for it. Would anyone be able to advise?

Here is the link to my jsfiddle: https://jsfiddle.net/rebeccasmith1301/k87oujgy/

 function find_link_by_href(){ var articleName; // Create variable articleName links = document.getElementsByTagName("a"); // Collect all of the a tags on the page alert(links.length); var counter = 0; // Create a counter and set it to 0 for(var i = 0; i < links.length; i++) { // Crawl through all all links alert(links[i].href.protocol); if( links[i].href.protocol != "https:") { counter = counter + 1; links[i].style.color = "yellow"; links[i].style.border = "solid"; links[i].style.border = "2px"; links[i].style.border = "yellow"; } } alert("There is " + counter + " amount of http links on this page.") } find_link_by_href(); 

 <article> <h1>Hello I am h1</h1> <p>Lorum ipsum lorum ipsum lorum ipsum lorum ipsum</p> <p>Lorum ipsum lorum ipsum lorum ipsum lorum ipsum</p> <p>Lorum ipsum lorum <a href="http://www.google.co.uk">ipsum lorum</a> ipsum lorum ipsum</p> <p>Lorum ipsum lorum ipsum lorum ipsum lorum ipsum</p> <p>Lorum ipsum lorum ipsum lorum ipsum lorum ipsum</p> <p>Lorum ipsum lorum ipsum lorum ipsum lorum ipsum</p> <p>Lorum ipsum lorum ipsum lorum ipsum lorum ipsum</p> <p>Lorum ipsum lorum <a href="https://www.google.co.uk">ipsum lorum</a> ipsum lorum ipsum</p> </article> 

Answer 1

There is no need to use a reg exp, just check to see if the protocol of the link is http. Also you can just add a class to make it cleaner.

 var anchors = document.querySelectorAll("a"); for (var i=0; i<anchors.length; i++) { var anchor = anchors[i]; anchor.classList.toggle("warn", anchors[i].protocol!=="https:"); } 

 .warn { background-color: yellow } 

 <article> <h1>Hello I am h1</h1> <p>Lorum ipsum lorum ipsum lorum ipsum lorum ipsum</p> <p>Lorum ipsum lorum ipsum lorum ipsum lorum ipsum</p> <p>Lorum ipsum lorum <a href="http://www.google.co.uk">ipsum lorum</a> ipsum lorum ipsum</p> <p>Lorum ipsum lorum ipsum lorum ipsum lorum ipsum</p> <p>Lorum ipsum lorum ipsum lorum ipsum lorum ipsum</p> <p>Lorum ipsum lorum ipsum lorum ipsum lorum ipsum</p> <p>Lorum ipsum lorum ipsum lorum ipsum lorum ipsum</p> <p>Lorum ipsum lorum <a href="https://www.google.co.uk">ipsum lorum</a> ipsum lorum ipsum</p> </article> 

Answer 2

Try replacing

links[i].href.protocol

with

links[i].protocol

Here's an updated Fiddle: https://jsfiddle.net/0kc2qxug/ and some additional information regarding protocol : http://www.w3schools.com/jsref/prop_anchor_protocol.asp

Answer 3

Why use JavaScript? CSS can do it for you:

img[src^='http://'] {border:1px solid yellow}
a[href^='http://'] {color:yellow}

Answer 4

You can do that with css

a[href^='http://'] {
  color: yellow;
}

a[href^='http://'] > img {
  border: 1px solid yellow;
}

Example : http://jsbin.com/vinayuvaru/edit?html,css,output

Answer 5

Just parse the href:

function find_link_by_href(){
            var articleName; // Create variable articleName
            links = document.getElementsByTagName("a"); // Collect all of the a tags on the page
            var counter = 0; // Create a counter and set it to 0
            for(var i = 0; i < links.length; i++) { // Crawl through all all links
            var href = links[i].href;
    var host = links[i].host;
    var protocol = href.replace(host, '');
    protocol = protocol.replace('///', '');

      if( protocol !== "https:") { 
                    counter = counter + 1;
                    links[i].style.color = "yellow";
                    links[i].style.border = "solid";
                    links[i].style.border = "2px";
                    links[i].style.border = "yellow";
                } 
            }
            alert("There is " + counter + " amount of http links on this page.")
        }
  find_link_by_href();

https://jsfiddle.net/k87oujgy/1/