javascript - 通过在 html 字符串中插入基本标记来使 url 成为绝对的？

Question

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

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

现在我想获取所有 URL 的列表:

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

但是，这将生成一个包含基于执行代码的页面的相对 URL 的列表。

是否可以通过以某种方式插入基本标记来使相对 URL 成为绝对的？或者有什么更好的方法吗？

谢谢!

Answer 1

如果你想要原始的 href 值然后使用 .getAttribute('href') 来获取它而不是 .href:

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);

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