javascript - jQuery 替换相对链接

Question

希望有人能解释我在使用 jQuery 时遇到的一些奇怪行为。以下脚本在我的页面上寻找相对链接并将其替换为绝对链接。

$(document).ready(function() {
  $("a[href^='/']").each(function(){ 
    var cur_href = $(this).prop("href");
    $(this).prop("href", 'http://www.mysite.com'+cur_href);
  });
});

我在将通过 https 提供的页面上使用此脚本，但我不希望我的所有导航都链接到 https 页面。由于我的导航是全局包含的，这似乎是解决问题的最简单方法。

我遇到的问题来自于实际的更换。脚本的第二行正确匹配页面上的所有相关链接，然后运行脚本的替换部分。在第 4 行的替换中，我得到了一些奇怪的结果。这部分脚本运行后，我的 URL 最终看起来像这样:

http://www.mysite.comhttps//www.mysite.com/mypage.htm

显然没有按照我的意愿行事。脚本的第一部分似乎与相对 URL 匹配，但当替换部分触发时，浏览器已经添加了域信息。

到目前为止，我发现的唯一一件事实际上是在做我想做的事情，那就是编写替代品来预测浏览器添加的内容:

this.href = this.href.replace(/^https:\/\/www\.mysite\.com\//, "http://www.mysite.com/");

有更好的方法吗？

---

编辑:here is a jsfiddle of the problem .

Answer 1

jQuery 在这里没有引起问题。问题是 HTMLAnchorElement 的 href 属性(jQuery 返回的对象类型)，per the spec , 总是包含一个绝对 URI。

在 HTML5 中 href 是 a composite attribute您可以通过修改href.protocol随意交换协议(protocol)(//之前的部分)，例如:

var link = $( '<a href="https://example.com/foo">bar</a>' )[0];
console.log( link.href );
// => https://example.com/foo

link.href.protocol = 'http:';
console.log( link.href );
// => http://example.com/foo

对于没有复合 href 的旧浏览器，您只需要使用正则表达式:

console.log( link.href );
// => https://example.com/foo

link.href = link.href.replace( /^https:/, 'http:' );
console.log( link.href );
// => http://example.com/foo

TLDR:您的代码应如下所示:

$( "a[href^='/']" ).prop( "href",
  function( _idx, oldHref ) {
    return oldHref.replace( /^https:/, 'http:' );
  }
);

附言您会注意到我省略了您的 $.each 调用。这是因为 prop 自 Action 用于匹配集中的每个元素，即它已经完成了您对 each 所做的事情。

---

.prop( propertyName, function(index, oldPropertyValue) )

• propertyName The name of the property to set.
• function(index, oldPropertyValue) A function returning the value to set. Receives the index position of the element in the set and the old property value as arguments. Within the function, the keyword this refers to the current element.