使用javascript编辑所有外部链接 [英] Editing all external links with javascript
问题描述
我怎样才能通过javascript的div中的所有外部链接,添加(或附加)一个类和alt-text?
我想我需要获取div元素中的所有对象,然后检查每个对象是否为a,并检查href属性是否以http(s)开头://(然后应该是外部链接),然后将内容添加到alt和class属性(if它们不存在创建它们,如果它们存在的话;附加想要的值)。
但是,如何在代码中执行此操作?
这个测试:
< style type =text / css>
.AddedClass
{
background-color:#88FF99;
}
< / style>
< script type =text / javascript>
window.onload = function()
{
var re = /^(https?:\/\/[^\/]+).*$/;
var currentHref = window.location.href.replace(re,'$ 1');
var reLocal = new RegExp('^'+ currentHref.replace(/\./,'\\。'));
var linksDiv = document.getElementById(Links);
if(linksDiv == null)return;
var links = linksDiv.getElementsByTagName(a);
for(var i = 0; i< links.length; i ++)
{
var href = links [i] .href;
if(href ==''|| reLocal.test(href)||!/ ^ http / .test(href))
continue;
if(links [i] .className!= undefined)
{
links [i] .className + ='AddedClass';
}
else
{
links [i] .className ='AddedClass';
}
if(links [i] .title!= undefined&& links [i] .title!='')
{
links [i] .title + ='(外部链接)';
}
else
{
links [i] .title ='外部链接';
}
}
}
< / script>
< div id =Links>
< a name =_ Links>< / a>
< a href =/ foo.asp> FOO< / a>
< a href =ftp://FTP.org/FILE.zip> FILE< / a>
< a href =http://example.com/somewhere.html> SomeWhere< / a>
< a href =http://example.com/somewhere2.htmlclass =Gah> SomeWhere 2< / a>
< a href =http://example.com/somewhere3.htmltitle =它走到某个地方> SomeWhere 3< / a>
< a href =https://another-example.com/elsewhere.php?foo=bar> ElseWhere 1< / a>
< a href =https://another-example.com/elsewhere.php?foo=bozclass =Doh> ElseWhere 2< / a>
< a href =deep / below / bar.asp> BAR< / a>
< a href =javascript:ShowHideElement('me');>显示/隐藏< / a>
< / div>
如果您使用的是共享服务器上的帐户,例如 http://big-server.com/~UserName/ ,您可能需要对URL进行硬编码以超越顶级。另一方面,如果你想 http://foo.my-server.com你可能想改变RE 和 http://bar.my-server.com 标记为本地。
[UPDATE]良好的评论后改进的鲁棒性...
我不强调FTP或其他协议,他们可能应该有一个明显的例程。 p>
How can I go through all external links in a div with javascript, adding (or appending) a class and alt-text?
I guess I need to fetch all objects inside the div element, then check if each object is a , and check if the href attributen starts with http(s):// (should then be an external link), then add content to the alt and class attribute (if they don't exist create them, if they do exists; append the wanted values).
But, how do I do this in code?
This one is tested:
<style type="text/css">
.AddedClass
{
background-color: #88FF99;
}
</style>
<script type="text/javascript">
window.onload = function ()
{
var re = /^(https?:\/\/[^\/]+).*$/;
var currentHref = window.location.href.replace(re, '$1');
var reLocal = new RegExp('^' + currentHref.replace(/\./, '\\.'));
var linksDiv = document.getElementById("Links");
if (linksDiv == null) return;
var links = linksDiv.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
{
var href = links[i].href;
if (href == '' || reLocal.test(href) || !/^http/.test(href))
continue;
if (links[i].className != undefined)
{
links[i].className += ' AddedClass';
}
else
{
links[i].className = 'AddedClass';
}
if (links[i].title != undefined && links[i].title != '')
{
links[i].title += ' (outside link)';
}
else
{
links[i].title = 'Outside link';
}
}
}
</script>
<div id="Links">
<a name="_Links"></a>
<a href="/foo.asp">FOO</a>
<a href="ftp://FTP.org/FILE.zip">FILE</a>
<a href="http://example.com/somewhere.html">SomeWhere</a>
<a href="http://example.com/somewhere2.html" class="Gah">SomeWhere 2</a>
<a href="http://example.com/somewhere3.html" title="It goes somewhere">SomeWhere 3</a>
<a href="https://another-example.com/elsewhere.php?foo=bar">ElseWhere 1</a>
<a href="https://another-example.com/elsewhere.php?foo=boz" class="Doh">ElseWhere 2</a>
<a href="https://another-example.com/elsewhere.php?foo=rad" title="It goes elsewhere">ElseWhere 3</a>
<a href="deep/below/bar.asp">BAR</a>
<a href="javascript:ShowHideElement('me');">Show/Hide</a>
</div>
If you are on an account on a shared server, like http://big-server.com/~UserName/, you might want to hard-code the URL to go beyond the top level. On the other hand, you might want to alter the RE if you want http://foo.my-server.com and http://bar.my-server.com marked as local.
[UPDATE] Improved robustness after good remarks...
I don't highlight FTP or other protocols, they probably deserve a distinct routine.
这篇关于使用javascript编辑所有外部链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!