How to search for links without the https protocol in JavaScript

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>

What about relative links, should they fail or pass. Because they will be http or https depending on what the page is. — epascarello
– epascarello, Commented Jul 26, 2016 at 16:57

SimianAngel · Accepted Answer · 2016-07-26 16:39:17Z

1

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

answered Jul 26, 2016 at 16:39

SimianAngel

62910 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

epascarello · Accepted Answer · 2016-07-26 16:38:21Z

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>

Niet the Dark Absol · Accepted Answer · 2016-07-26 16:40:23Z

1

Why use JavaScript? CSS can do it for you:

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

answered Jul 26, 2016 at 16:40

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Comments

Clyde Lobo · Accepted Answer · 2016-07-26 20:51:07Z

1

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

edited Jul 26, 2016 at 20:51

answered Jul 26, 2016 at 16:43

Clyde Lobo

9,1747 gold badges37 silver badges63 bronze badges

2 Comments

epascarello Over a year ago

This is selection all https links, OP wants to select non https links.

Clyde Lobo Over a year ago

@epascarello fixed

jarz · Accepted Answer · 2016-07-26 16:46:54Z

0

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/

answered Jul 26, 2016 at 16:46

jarz

7327 silver badges20 bronze badges

3 Comments

epascarello Over a year ago

why are you using host?

jarz Over a year ago

Host has doesn't have the protocol, so I use it to remove from the href everything but the protocol. Just one of like 1000 ways to do this :-)

epascarello Over a year ago

And add a querysting to the links and your method fails.

Collectives™ on Stack Overflow

How to search for links without the https protocol in JavaScript

5 Answers 5

Comments

Comments

Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related