Question

我需要编写一些JavaScript来识别该页面中没有使用https协议且只有http的链接。一旦找到它们，就需要将链接的字体更改为黄色，或者如果链接是图像，则给它一个黄色边框。我写了一些搜索页面并收集标签的代码，但我不知道如何让它只指定不使用https的链接。我已经尝试在href上使用.protocol，但我可以说这是错的（我还在学习！）我猜测正则表达式是一个很好的起点但是我没有最简单的想法如何搜索为了它。有人能建议吗？

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

＆＃13;

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();

＆＃13;

<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>

＆＃13;

Answer 1

不需要使用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 2

尝试替换

links[i].href.protocol

与

links[i].protocol

这是一个更新的小提琴：https://jsfiddle.net/0kc2qxug/以及有关protocol的一些其他信息：http://www.w3schools.com/jsref/prop_anchor_protocol.asp

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/

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

5 个答案: