这是现有问题的变体
｛请注意，这个问题与现有的StackOverflow问题相反，该问题太复杂，无法回答｝
从一开始
我想从这个挑战中对一些代码进行一些改进：
// the new base url
var base = ' https://www.example.co.uk/gp/wine/order?ie=UTF8&asin=';
var links = document.getElementsByTagName('a');
for(var i = 0;i < links.length;i++){
// check each link for the 'asin' value
var result = /asin=([dw]+)/.exec(links[i].getAttribute('href'));
if(result){
// make a new url using the 'base' and the 'asin' value
links[i].setAttribute('href', base+result[1]);
}
}
现在，改为对所有链接执行操作，我能让它只查看来自文本的链接吗？
这里有一个HTML片段来展示我的意思：
<a href="/shop/product?ie=UTF8&asin=Z00FDLN878&tab=UK_Default" target="_blank"><img width="125" height="125" border="0" src="http://ecx.images-amazon.com/images/I/01W9a7gwosL.jpg" alt="43453"></a>
这是一个图片链接-我不希望它对此采取行动。
在直接javascript/DOM中，在遍历链接时测试链接：
var base = 'https://www.example.co.uk/gp/wine/order?ie=UTF8&asin=';
var linksNoImg = document.querySelectorAll ("a[href*='asin']");
for (var J = linksNoImg.length - 1; J >= 0; --J) {
var imgLink = linksNoImg[J];
//--- Make sure it's not an image link:
if ( ! imgLink.querySelector ('img') ) {
//--- Check each link for the 'asin' value
var result = /asin=([dw]+)/.exec (imgLink.getAttribute ('href') );
if (result) {
// make a new url using the 'base' and the 'asin' value
imgLink.setAttribute ('href', base+result[1]);
}
}
}
jQuery只允许您预选正确的链接：
//--- The new base URL
var base = ' https://www.example.co.uk/gp/wine/order?ie=UTF8&asin=';
var linksNoImg = $("a[href*='asin']:not(:has(img))");
linksNoImg.each ( function () {
// check each link for the 'asin' value
var result = /asin=([dw]+)/.exec(links[i].getAttribute('href'));
if(result){
// make a new url using the 'base' and the 'asin' value
links[i].setAttribute('href', base+result[1]);
}
} );
但这需要在Greasekit中加载jQuery——对于除最简单的脚本外的任何脚本来说，这都是值得的。
if (links[i].querySelector('img')) {
// Link has an <img>! Oh no!
}
要支持较旧的浏览器，请改为调用getElementsByTagName()（并检查空数组）。