Question

假设我有一个html字符串，可以包含任何元素的变体，包括具有相对和非相对URL的锚点：

var html = '<div><a href="https://stackoverflow.com">Link</a><a href="/questions">Link</a><a href="">Link</a></div>';

现在我想获得所有网址的列表：

var list = [];
$(html).find('a').each(function(){
    list.push(this.href);
});

但是，这将导致列表中包含基于正在执行代码的页面的相对URL。

是否有可能通过以某种方式插入基本标记来使相对URL绝对？还是有更好的方法吗？

谢谢！

Answer 1

如果您想要原始的href值，请使用.getAttribute('href')来代替.href：

＆＃13;

var html = '<div><a href="https://stackoverflow.com">Link</a><a href="/questions">Link</a><a href="">Link</a></div>';

// this function takes an url and deremines wether it is an absolute path or not
function isAbsolute(url) {
    return url.indexOf("//") === 0 || /^[a-z]+:\/\//i.test(url);
}

var list = [],
    baseUrl = "http://www.google.com";       // the base url
$(html).find('a').each(function() {
    var href = this.getAttribute('href');    // get the raw href attribute value
    if(isAbsolute(href)) {                   // if the href is of an absolute path
        list.push(href);                     // then push it as it is
    } else {                                 // otherwise
        list.push(baseUrl + href);           // append it to the base url and then push it
    }
});

console.log(list);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

取决于网址

第一种情况：URL以协议开头，如https：//

在这里，您可以保持URL不变，它可以在任何地方使用。

第二种情况：网址以/

开头

在这种情况下，您需要将window.location.protocol + "//" + window.location.host添加到您的网址

第3种情况：除了那些以...... /

开头的情况之外的任何其他情况

在这种情况下，您需要将网址添加到window.location.href + "/"，但不包含哈希部分且不包含/ yourpagename。

第4种情况：网址以../

开头

在这种情况下，你需要在URL中删除尽可能多的部分../是你的href以+ 1开头。例如：

加载的网址为：http://foo.bar/a/b/c/d

href是../../ e / f

您需要将http://foo.bar/a/添加到e / f

Answer 3

var html = '<div><a href="https://stackoverflow.com">Link</a><a href="/questions">Link</a><a href="">Link</a></div>';

var list = [];
var list2 = [];
$(html).find('a').each(function(){
    list.push($(this).attr('href'));
    list2.push(this.href);
});
console.log(list);
console.log(list2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 4

在纯javaScript中，

const html = '<div><a href="https://stackoverflow.com">Link</a><a href="/questions">Link</a><a href="">Link</a></div>';

// Create a dummy DOM element and add the string to it. Then, you can manipulate it like any DOM element.
const node = document.createElement('div');
node.innerHTML = html;

// Select all tags with the attribute `href`
const tags = node.querySelectorAll('[href]');

var urls = [];

// Loop through tags
for(var i = 0, length = tags.length; i < length; i++) {
  var link = tags[i].href;
  urls.push(link);
}

console.log(urls);

Answer 5

我知道这很旧，但仅供参考。如果您想将相对网址（任何形式）转换为绝对网址，并且知道基本网址（您始终知道基本网址），则只需执行以下操作：

const makeAbsoluteHref = (url, base) => new URL(url, base).href;

通过在html字符串中插入基本标记来使URL绝对？

5 个答案: