javascript - 为什么在尝试更改链接属性时，即使控制台输出正确的结果，DOM 仍保持不变？

Question

function makeLinks(context, url) {
    var sets = context ? $(context + ' a') : $('a'),
        prot = url || window.location.protocol;
    if(prot.match(/https/)){
        lockup(sets);
    }

    function lockup(elem) {
        elem.each(function(){
            var self = $(this), 
                href = self.attr('href');
            if(href.match(/http[^s]/)){

                // This logs the correct output
                console.log(href.replace('http','https'));

                // This fails
                href.replace('http','https');
            }
        });
    }
}

该函数的目的是检查窗口对象当前的协议(protocol)。
如果是“https:”，那么我希望 href 为“http”的 anchor 为“https”。

该函数的调用方式如下:makeLinks('#wrapper', 'https:');
第二个参数只是为了测试，否则会使用window.location.protocol

目前，当我在如下所示的标记上调用此函数时:

<a href="http://cross-origin-denial.com"></a>
<a href="http://pleasesecureme.com"></a>
<a href="https://imcool.com"></a>

<div id="wrapper">
    <a href="http://cross-origin-denial.com"></a>
    <a href="http://imscrewed.com"></a>
    <a href="http://yougotmetoo.com"></a>
    <a href="https://imcool.com"></a>
</div>

控制台准确地记录了我想要发生的情况，但是，实际的 href 在 DOM 内部保持不变。

我已经在 Chrome 和 Firefox 中进行了测试，结果相同
我很确定我的逻辑在某个地方(或到处)是错误的
如果有人能帮助我理解原因，我将非常感激:)

Answer 1

您没有对 .replace() 的结果执行任何操作。

您需要设置新值。

  self.attr('href', href.replace('http','https'));

<小时/>

或者更好的方法是这样的:

function lockup(elem) {
    elem.attr('href', function(i, href) {
        return href.match(/http[^s]/) ? href.replace('http','https') : href;
    });
}