更改页面上的特定链接

Question

我是编码新手，对 JavaScript 也是如此。

我试图在 Stack Overflow 上找到我的问题的解决方案，但只找到了部分问题的答案。 我在下面修补了一个显然不起作用的代码。

我的目标是在 href 属性中选择具有特定域的网页上的链接，然后更改所选链接的 href，以便仅保留 url 字符串的前 106 个字符和一个新位（“groupid=provider”）添加到它。 这些链接也应该接收一个值为“wrongLink”的类属性。 当我加载包含以下脚本的网页时，网页上的每个链接都会受到影响，无论链接 url 中的域如何。

代码：

window.onload = function() {
       /* onload code */

var anchors = document.getElementsByTagName("a");

for (var i = 0; i < anchors.length; i++) {
    var urltobechanged = anchors[i].href;  
       /* urltobechanged to store the url */

    var domaincheck = urltobechanged.startsWith("example.com");

    if (domaincheck = true){
       /* if the stored url starts with "example.com", then.. */

        anchors[i].href = urltobechanged.substring(0,105) + "groupid=provider";
       /* keep the first 106 characters of the url and add "goupid=provider" to it */

        anchors[i].setAttribute("class", "wrongLink");
       /* add class with "wrongLink" attribute to the the changed link element */
    }
}
}

任何帮助将非常感激。 谢谢

Answer 1

• if (domaincheck = true)是一个赋值，而不是用== (equals) 或=== (strictly equals) 完成的相等性测试 - 因为它是一个布尔值，你甚至不需要= s: if (domaincheck) { ...会正常工作

• 除非您获得 href 属性，否则 href 不会以 example.com 开头。 achor 的实际 href 将从您所在的站点开始，例如https://example.com这意味着您需要创建一个 URL 并查看主机名

这是使用该属性的代码。 注意我使用

• 传播 [...] 将 nodeList 转换为数组，以允许稍旧的浏览器在其上运行 forEach，我使用

• classList.add允许链接上存在其他类

 window.addEventListener("load", function() { [...document.querySelectorAll("a")].forEach(function(anchor) { const urltobechanged = anchor.getAttribute("href"); const domaincheck = urltobechanged.startsWith("example.com"); if (domaincheck) { anchor.href = urltobechanged.substring(0, 105) + "?groupid=provider"; // remove the ? if your href already has one in pos 106 /* keep the first 106 characters of the url and add "groupid=provider" to it */ anchor.classList.add("wrongLink"); } }) })

 .wrongLink { background-color:red }

 <a href="example.com">Example.com</a><br> <a href="NOT example.com">NOT Example.com</a>

这是使用主机名的代码

 window.addEventListener("load", function() { [...document.querySelectorAll("a")].forEach(function(anchor) { const urltobechanged = new URL(anchor.href); const domaincheck = urltobechanged.hostname.startsWith("stacksnippets.net"); // change to example.com or whatever if (domaincheck) { anchor.href = urltobechanged.pathname += "?groupid=provider" anchor.classList.add("wrongLink"); } }) })

 .wrongLink { background-color:red }

 <a href="page.html">https://stacksnippets.net/page.html</a><br> <a href="https://somethingelse.com">NOT stacksnippet.net</a>

Answer 2

您的代码中有一些错误/可以改进的地方，但您走在正确的轨道上。

• 当您检查 url 是否以example.com开头时，大多数情况下，它们将以http://或https://开头。 最好使用indexOf('example.com') !== -1代替。 （或者一个正则表达式，如果字符串的其余部分可以包含一个 url，比如https: //someUrl.com/?url =example.com/ `
• 您正在尝试在 if 条件中使用赋值来比较 ( = vs === )。 由于您正在与 true 进行比较，因此您可以简单地执行if(domaincheck) 。
• 您将布尔值分配给变量而不是比较 if 语句中的布尔值。 这可以通过将比较表达式直接传递给if ( if(urltobechanged.indexOf("example.com") !== -1)
• 当您向 url ) + "groupid=provider"添加值时，它看起来不会是有效的获取参数。 你需要? 或&也在其中。 （ https://example.com/test将变成https://example.com/testgroupid=provider而不是https://example.com/test?groupid=provider 。
• 出于多种原因，您应该使用let而不是var
• 向元素添加类时，应使用classList属性，该属性返回包含类的字符串。 然后我们可以将我们的新类附加到这个字符串。 element.className += "new class"

这是您的代码的修订版本。

 let anchors = document.getElementsByTagName("a"); for (let i = 0; i < anchors.length; i++) { let urltobechanged = anchors[i].href; /* urltobechanged to store the url */ if ( urltobechanged.indexOf("example.com") !== -1){ /* if the stored url starts with "example.com", then.. */ // we check if the url already contains get parameters // we are using a ternary operator which is resumed to // condition ? true : false let symbolToAdd = urltobechanged.indexOf('?') !== -1 ? '&' : '?'; anchors[i].href = urltobechanged.substring(0,105) + symbolToAdd + "groupid=provider"; /* keep the first 106 characters of the url and add "goupid=provider" to it */ anchors[i].className += " wrongLink"; // classList.add might be a better choice. /* add class with "wrongLink" attribute to the the changed link element */ } }

 <a href="https://example.com">test</a> <a href="https://notgoingToBechanged.com">i won't be changed</a>

Answer 3

两件事情：

• if (domaincheck = true)需要if (domaincheck)
• 你需要在你的锚上使用.getAttribute

window.onload = function() {
    /* onload code */

    var anchors = document.getElementsByTagName("a");

    for (var i = 0; i < anchors.length; i++) {
        var urltobechanged = anchors[i].getAttribute("href");
        /* urltobechanged to store the url */

        var domaincheck = urltobechanged.startsWith("example.com");

        if (domaincheck) {
            /* if the stored url starts with "example.com", then.. */

            anchors[i].href =
                urltobechanged.substring(0, 105) + "groupid=provider";
            /* keep the first 106 characters of the url and add "goupid=provider" to it */

            anchors[i].setAttribute("class", "wrongLink");
            /* add class with "wrongLink" attribute to the the changed link element */
        }
    }
};