在 href 表达式 <a href=“javascript:;”></a> 中查找 http 并将其替换为 https

Question

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

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

现实中有 link 的图像：非常感谢！

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>

Answer 1

您只需将匹配的字符串放入括号中即可：

let string = "http://www.test.com";
string.replace(/(http:\/\/)/, "https://");

Answer 2

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

除此之外，我会使用 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，如果可能，请执行以下操作之一（这是一个或列表，执行第一个适合您的目标 environment/browsers 的操作）：

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

旁注：我建议不要首先将 JavaScript 代码放在 href 中。相反，让 href 变得有意义，理想情况下，如果 JavaScript 被禁用，它会带你去一些有用的地方，并使用现代事件处理（可能使用事件委托）附加你的事件处理程序，并让 JavaScript如果它运行s，代码会阻止默认操作（在 link 之后）。例如：

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>

现在您不必根据是否使用 " 或 ' 作为属性分隔符、您的 JavaScript 代码来转义引号或选择引号在脚本文件等中

事实上，仔细想想，处理程序甚至可以为您处理 http:// => https:// 事情：

    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>

Answer 3

使用setAttribute和getAttribute定位元素的"href"属性。
使用 String.prototype.replace 和 $& 替换模式 （ 匹配的子字符串 ）
(PS: 确保在 HTML)
始终使用 Element.addEventListener() 而不是 on* 处理程序（除非您从内存中创建全新的元素），以免覆盖其他分配的处理程序。

window.addEventListener("load", () => {
  const EL_anchors = document.querySelectorAll('.page-numbers');
  EL_anchors.forEach(EL =>
    EL.setAttribute("href", EL.getAttribute("href").replace(/\bhttp(?=:\/\/)/, "$&s"))
  );
});

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

\b         << Word boundary
http       << Match substring (Reused later with the .replace() `$&` pattern)
(?=:\/\/)  << Positive lookahead: followed by "://"

.replace() 的第二个参数模式在哪里：

$&   << insert the matcher "http" substring
s    << insert the character "s"

要全局替换，您还可以使用 g 标志：/\bhttp(?=:\/\/)/g

在 href 表达式 <a href=“javascript:;”></a> 中查找 http 并将其替换为 https

Finding http in a href expression <a href=“javascript:;”></a> and replace it with https

html

javascript

regex

replace

hyperlink