CODEWITHSUNDEEP
javascripthtmlregex
rebeccasmith_me
rebeccasmith_me

Reputation: 41

How to search for links without the https protocol in JavaScript

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>

Upvotes: 0

Views: 280

Answers (5)

Clyde Lobo
Clyde Lobo

Reputation: 9174

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

Upvotes: 1

jarz
jarz

Reputation: 732

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/

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324630

Why use JavaScript? CSS can do it for you:

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

Upvotes: 1

SimianAngel
SimianAngel

Reputation: 629

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

Upvotes: 1

epascarello
epascarello

Reputation: 207501

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>

Upvotes: 1

Related Questions