jQuery替换相对链接 [英] jQuery replacing relative links

问题描述

希望有人可以解释我在jQuery中遇到的一些奇怪的行为。以下脚本正在我的页面上查找相关链接并用绝对链接替换它们。

Hopefully someone can explain some odd behavior I've encountered with jQuery. The following script is looking for relative links on my page and replacing them with absolute links.

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

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

I'm using this script on a page that will be served up over https but I don't want all of my navigation to link to https pages. Since my navigation are global includes, this seemed like the easiest way to fix the problem.

我遇到的问题出现在实际更换中。脚本的第二行正确匹配页面上的所有相对链接，然后运行脚本的替换部分。这是替换，第4行，我得到一些奇怪的结果。运行此部分脚本后，我的网址最终如下所示：

The issue I'm encountering comes in the actual replacement. The second line of the script correctly matches all relative links on the page and then runs the replacement part of the script. It is in the replacement, line 4, where I get some weird results. After this part of the script runs, my URLs end up looking like this:

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

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

Obviously isn't doing what I want. It seems like the first part of the script is matching the relative URL but when the replacement part fires the browser has already tacked on the domain information.

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

The only thing I've found so far that actually does what I want is to write the replacement anticipating what the browser has tacked on:

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

有更好的方法吗？

编辑：这是问题的一个方面。

推荐答案

jQuery在这里没有引起问题。问题是HTMLAnchorElement的 href 属性（jQuery返回的对象类型），根据规范，始终包含绝对URI。

jQuery isn't causing a problem here. The issue is that the href property of HTMLAnchorElement (the type of object jQuery is returning), per the spec, always contains an absolute URI.

在HTML5中 href 是复合属性，您可以通过修改 href随意交换协议（ // 之前的部分）。协议，例如：

In HTML5 href is a composite attribute and you can just swap the protocol (the part before //) at will by modifying href.protocol, e.g.:

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

对于没有复合<％c $ c>的旧浏览器href 你只需要使用正则表达式：

For older browsers without the composite href you'll just have to make do with a regex:

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

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

TLDR：您的代码应该是看起来像这样：

TLDR: Your code should look something like this:

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

P.S。您会注意到我已经删除了 $。每次电话。那是因为 prop 会自动作用于匹配集合中的每个元素，即它已经完成了你用每个做的事情。

P.S. You'll notice that I elided your $.each call. That's because prop automatically acts on every element in the matched set, i.e. it already does what you were doing with each.

.prop（propertyName，function（index，oldPropertyValue））

• propertyName 要设置的属性的名称。


• function（index， oldPropertyValue） 将值返回到set的函数。接收set中元素的索引位置和旧属性值作为参数。在函数中，关键字 this 引用当前元素。

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

这篇关于jQuery替换相对链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！