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

我需要编写一些JavaScript来识别页面中不使用https协议且只有http的任何链接。一旦找到它们，它需要将链接的字体更改为黄色，或者如果链接是图像，则给它一个黄色边框。 我已经编写了一些代码来搜索页面并收集a标记，但我不确定如何让它只指定不使用https的链接。我试过在href上使用.protocol，但我知道这是错误的（我还在学习！）我猜正则表达式是一个很好的开始，但我不知道如何搜索它。有人能提供建议吗

以下是指向我的JSFIDLE的链接：

function find_link_by_href（）{
var articleName；//创建变量articleName
links=document.getElementsByTagName（“a”）；//收集页面上的所有a标记
警报（links.length）；
var counter=0；//创建一个计数器并将其设置为0
对于（var i=0；i
ipsum lorum ipsum

同色同色同色同色同色同色同色同色同色同色

同色同色同色同色同色同色同色同色同色同色

同色同色同色同色同色同色同色同色同色同色

同色同色同色同色同色同色同色同色同色同色

同色同色同色同色同色同色同色

无需使用reg exp，只需检查链接的协议是否为http即可。此外，您还可以添加一个类以使其更干净


var-anchors=document.querySelectorAll（“a”）；
对于（var i=0；i ipsum lorum ipsum

同色同色同色同色同色同色同色同色同色同色

同色同色同色同色同色同色同色同色同色同色

同色同色同色同色同色同色同色同色同色同色

同色同色同色同色同色同色同色同色同色同色

同色同色同色同色同色同色同色

无需使用reg exp，只需检查链接的协议是否为http。此外，您还可以添加一个类以使其更干净


var-anchors=document.querySelectorAll（“a”）；
对于（var i=0；i ipsum lorum ipsum

同色同色同色同色同色同色同色同色同色同色

同色同色同色同色同色同色同色同色同色同色

同色同色同色同色同色同色同色同色同色同色

同色同色同色同色同色同色同色同色同色同色

同色同色同色同色同色同色同色

尝试更换

links[i].href.protocol

与

这里有一个更新的提琴：和一些关于
协议的附加信息：
尝试替换

links[i].href.protocol

与

这里有一个更新的提琴：还有一些关于
协议的附加信息：
为什么要使用JavaScript？CSS可以帮你：

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

为什么要使用JavaScript？CSS可以为您做到：

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

您可以使用css来实现这一点

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

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

示例：
您可以使用css实现这一点

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

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

示例：
只需解析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();

function find_link_by_href（）{
var articleName；//创建变量articleName
links=document.getElementsByTagName（“a”）；//收集页面上的所有a标记
var counter=0；//创建一个计数器并将其设置为0
对于（var i=0；i

只需解析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();

function find_link_by_href（）{
var articleName；//创建变量articleName
links=document.getElementsByTagName（“a”）；//收集页面上的所有a标记
var counter=0；//创建一个计数器并将其设置为0
对于（var i=0；i

为什么要使用主机？主机没有协议，所以我使用它从href中删除除协议之外的所有内容。这是1000种方法中的一种：-）并向链接中添加查询，则您的方法失败。为什么要使用主机？主机没有协议，因此我使用它从href中删除除协议之外的所有内容。只需使用1000种方法中的一种：-）并向链接中添加查询，则您的方法失败。这是选择所有https链接，OP想要选择非https链接。@epascarello已修复此选择是所有https链接，OP想要选择非https链接。@epascarello已修复相对链接，如果它们失败或通过，该如何处理。因为他们