JS：从 DOM 中提取 href 和 src 属性 URL 作为绝对 URL答案

【问题标题】：JS: extracting href and src attributes URLs from DOM as absoluteJS：从 DOM 中提取 href 和 src 属性 URL 作为绝对 URL
【发布时间】：2011-12-20 14:38:42
【问题描述】：

我正在使用 JQuery 从 DOM 中的元素中提取 src 和 href，如下所示：

var mysrc;
$('img[src]').each(function (index) {
   mysrc = $(this).attr('src');
   // convert relative path to absolute url
});

然而，这些图像或链接 href 中的许多路径是相对的，而不是绝对的。有时他们会像这样从 web 根目录开始：/blah/img.jpg，然后在一个目录中上下移动：../blah/img.jpg。我想将所有这些路径设为绝对 URL，但我还没有找到执行此操作的脚本。我知道如何从该位置提取给定页面的主机，但是我错过了将这些相对路径转换为绝对 URL 的所有逻辑。任何想法我可以在 Javascript/JQuery 中找到执行此操作的内容，或者我应该如何进行。

感谢您的帮助，

【问题讨论】：

标签： javascript jquery regex path absolute-path

【解决方案1】：

.prop()返回计算出来的属性值，即绝对路径。
除了使用 jQuery 方法，您还可以使用普通的this.src。

$('img[src]').each(function (index) {
   // var mysrc = $(this).prop('src');  //<-- jQuery
   var mysrc = this.src;
   // Why do you want to get the absolute path, by the way?
});

【讨论】：

酷！谢谢。实际上发现这也可以： $('#your_img').get(0).src - 但这可能是同一件事，对吗？
@Loic。 .get(0) 返回 jQuery 对象的第一个匹配的 DOM 元素。所以，$(this).get(0) === this.

【解决方案2】：

您可能想要获取应用程序上下文 - 我认为它在 javascript 中不可用。你可能知道每个应用程序。

在 JSP 中，您可以像这样获得上下文：

var contextPath = "";

其他服务器端语言应该有类似的结构。有了上下文，您可以形成绝对路径，例如

绝对路径 = window.location - contextPath + relativeURL;

所以，如果你的网址是

http://mysite.com/foo/bar 和上下文是 http://mysite.com/foo/ 并且相对路径是 "../somedir/mypic.jpg" 那么绝对路径是

/bar/../somedir/mypic.jpg

【讨论】：