如何在不使用https协议的情况下搜索链接

Question

我需要编写一些JavaScript标识该页面内不使用https协议且只有http的任何链接。一旦找到它们，它需要将链接的字体更改为黄色，或者如果链接是图片，请给它一个黄色边框。 我写了一些代码，通过搜索页面并收集标签，但我不知道如何让它只指定不使用https的链接。我试过在href上使用.protocol，但我可以告诉这是错误的（我还在学习！）我猜正则表达式是一个很好的开始，但我没有最隐秘的想法如何搜索为了它。任何人都可以建议吗？

这里是链接到我的jsfiddle： https://jsfiddle.net/rebeccasmith1301/k87oujgy/

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

尝试用

links[i].protocol 

这里更换

links[i].href.protocol 

是一个更新的小提琴：https://jsfiddle.net/0kc2qxug/和有关一些附加信息：http://www.w3schools.com/jsref/prop_anchor_protocol.asp

Answer 2

没有必要使用一个reg EXP，只是检查是否链路的协议是HTTP。你也可以添加一个类，使其更清洁。

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 3

为什么使用JavaScript？ CSS可以为你做到这一点：

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

Answer 4

你可以做到这一点与CSS

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

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

例子：http://jsbin.com/vinayuvaru/edit?html,css,output

Answer 5

只是解析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/