并将其替换为 https,javascript,html,regex,replace,hyperlink"/>
时间戳

首页 > 解决方案 > 在 href 表达式中查找 http并将其替换为 https

javascript - 在 href 表达式中查找 http并将其替换为 https

问题描述

我有一些形式的链接，<a href="javascript:;我需要http在其中找到并替换为https://

在这种情况下，简单地编写一个用于查找的 JS 代码是http行不通的，我完全被卡住了。在类似的表达式中找到链接的最佳方法是<a href="javascript:some very long lines;">Link</a>什么？

带有现实链接的图像： 在此处输入图像描述 非常感谢！

window.onload = function() {
    let url = document.querySelectorAll('.page-numbers');

    url.forEach((e) => {
      e.setAttribute('href', e.href.replace(/^http:\/\//i, 'https://'));
      console.log(e);

    }); 
};
<div class="pagingSection">
      <a href="javascript:WebF(new WebFform("ctl01$ctl8$g_8f9c2af0", "", false, "", "http://www.example.com/test.aspx?cor=%20;403-7e1ee457616b%7%20;0374d4027-5a27-4421-9771-6326d4746a20%7%20ol;&areaId=%=6", false, true))" class="page-numbers">Link 1</a>
      <a href="javascript:WebF(new WebFform("ctl01$ctl8$g_8f9c2af0", "", false, "", "http://www.example.com/test2.aspx?cor=%20;403-7e1ee457616b%7%20;0374d4027-5a27-4421-9771-6326d4746a20%7%20ol;&areaId=%=7", false, true))" class="page-numbers">Link 2</a>
      <a href="javascript:WebF(new WebFform("ctl01$ctl8$g_8f9c2af0", "", false, "", "http://www.example.com/test3.aspx?cor=%20;403-7e1ee457616b%7%20;0374d4027-5a27-4421-9771-6326d4746a20%7%20ol;&areaId=%=8", false, true))" class="page-numbers">Link 3</a>
    </div>

标签： javascripthtmlregexreplacehyperlink

解决方案

主要问题是您href在该 HTML 中的属性在您第一次"尝试放入属性时就结束了，因为您使用"的是引用属性值。如果您"在值中使用文字并且您没有在其中使用文字，请使用而不是'引用属性。否则，您可以使用，因为属性文本是 HTML 文本。'"&quot;

除此之外，我会使用getAttribute而不是href访问器属性来获取旧值，并且您不想以正则表达式开头，^因为您想匹配字符串开头以外的其他位置。我在这里使用\b（单词边界）：

const pageNums = document.querySelectorAll(".page-numbers");
for (const e of pageNums) {
    e.setAttribute(
        "href",
        e.getAttribute("href").replace(/\bhttp:\/\//g, "https://")
    );
    console.log(e.href);
}
<div class="pagingSection">
    <a href='javascript:WebF(new WebFform("ctl01$ctl8$g_8f9c2af0", "", false, "", "http://www.example.com/test.aspx?cor=%20;403-7e1ee457616b%7%20;0374d4027-5a27-4421-9771-6326d4746a20%7%20ol;&areaId=%=6", false, true))' class="page-numbers">Link 1</a>
    <a href='javascript:WebF(new WebFform("ctl01$ctl8$g_8f9c2af0", "", false, "", "http://www.example.com/test2.aspx?cor=%20;403-7e1ee457616b%7%20;0374d4027-5a27-4421-9771-6326d4746a20%7%20ol;&areaId=%=7", false, true))' class="page-numbers">Link 2</a>
    <a href='javascript:WebF(new WebFform("ctl01$ctl8$g_8f9c2af0", "", false, "", "http://www.example.com/test3.aspx?cor=%20;403-7e1ee457616b%7%20;0374d4027-5a27-4421-9771-6326d4746a20%7%20ol;&areaId=%=8", false, true))' class="page-numbers">Link 3</a>
</div>

请注意，我还将该代码移出load事件处理程序。该window load事件在页面加载过程中发生得很晚，在触发之前等待包括图像在内的所有资源加载。如果可能的话，不要使用load它，而是做这些事情之一（这是一个或列表，做第一个适合您的目标环境/浏览器的事情）：

  • 添加type="module"到script标签，使其在 HTML 完全加载并在模块范围内而不是在全局范围内运行之前不会运行。（所有主要的现代浏览器都支持模块。如果您需要支持 IE11，请不要这样做，但您使用的是箭头函数，所以我假设您不这样做，尽管您可能正在编译。）
  • 添加defer到script标签，使其在 HTML 完全加载之前不会运行。连IE11都支持defer。
  • 将script标签放在文档末尾，就在结束</body>标签之前。
  • 将代码包装在DOMContentLoaded处理程序而不是load处理程序中。

旁注：我建议不要将 JavaScript 代码href放在首位。相反，使href有意义的东西，理想情况下，如果 JavaScript 被禁用，它会给你带来帮助，并使用现代事件处理（可能使用事件委托）附加你的事件处理程序，并让 JavaScript 代码在运行时阻止默认操作（按照链接） . 例如：

const pageNums = document.querySelectorAll(".page-numbers");
for (const e of pageNums) {
    e.setAttribute(
        "data-target",
        e.getAttribute("data-target").replace(/\bhttp:\/\//g, "https://")
    );
    console.log(e.href);
}

// The handler
document.body.addEventListener("click", function(event) {
    const link = event.target.closest(".page-numbers");
    if (link) {
        event.preventDefault();
        const form = link.getAttribute("data-form");
        const target = link.getAttribute("data-target");
        WebF(new WebFform(form, "", false, "", target, false, true));
    }
});
<div class="pagingSection">
    <a href="#some-meaningful-value" data-form="ctl01$ctl8$g_8f9c2af0" data-target="http://www.example.com/test.aspx?cor=%20;403-7e1ee457616b%7%20;0374d4027-5a27-4421-9771-6326d4746a20%7%20ol;&areaId=%=6" class="page-numbers">Link 1</a>
    <a href="#some-meaningful-value" data-form="ctl01$ctl8$g_8f9c2af0" data-target="http://www.example.com/test2.aspx?cor=%20;403-7e1ee457616b%7%20;0374d4027-5a27-4421-9771-6326d4746a20%7%20ol;&areaId=%=7" class="page-numbers">Link 2</a>
    <a href="#some-meaningful-value" data-form="ctl01$ctl8$g_8f9c2af0" data-target="http://www.example.com/test3.aspx?cor=%20;403-7e1ee457616b%7%20;0374d4027-5a27-4421-9771-6326d4746a20%7%20ol;&areaId=%=8" class="page-numbers">Link 3</a>
</div>

Now you don't have to muck about with escaping quotes or picking quotes based on whether you've used " or ' for the attribute delimiter, your JavaScript code is in a script file, etc.

In fact, come to think of it, the handler could even handle the http:// => https:// thing for you:

    const link = event.target.closest(".page-numbers");
    if (link) {
        event.preventDefault();
        const form = link.getAttribute("data-form");
        // (Using `^` now because it *is* at the beginning of the string)
        const target = link.getAttribute("data-target").replace(/^http:\/\//g, "https://");
        WebF(new WebFform(form, "", false, "", target, false, true));
    }
});
<div class="pagingSection">
    <a href="#some-meaningful-value" data-form="ctl01$ctl8$g_8f9c2af0" data-target="http://www.example.com/test.aspx?cor=%20;403-7e1ee457616b%7%20;0374d4027-5a27-4421-9771-6326d4746a20%7%20ol;&areaId=%=6" class="page-numbers">Link 1</a>
    <a href="#some-meaningful-value" data-form="ctl01$ctl8$g_8f9c2af0" data-target="http://www.example.com/test2.aspx?cor=%20;403-7e1ee457616b%7%20;0374d4027-5a27-4421-9771-6326d4746a20%7%20ol;&areaId=%=7" class="page-numbers">Link 2</a>
    <a href="#some-meaningful-value" data-form="ctl01$ctl8$g_8f9c2af0" data-target="http://www.example.com/test3.aspx?cor=%20;403-7e1ee457616b%7%20;0374d4027-5a27-4421-9771-6326d4746a20%7%20ol;&areaId=%=8" class="page-numbers">Link 3</a>
</div>

推荐阅读