Jquery：如何防止前缀添加到`<a>`标签中的地址答案

【问题标题】：Jquery : How to prevent prefix addition to address within an `<a>` TagJquery：如何防止前缀添加到`<a>`标签中的地址
【发布时间】：2014-03-13 06:13:33
【问题描述】：

我有一个 HTML <a> 标签如下：

<a id="ext_link" href="www.google.com">GOOGLE HOME</a>

我正在使用 JQUERY 在新窗口中打开链接。 JQUERY如下：

$(document).ready(function(){
    $("#ext_link").click(function(e){
        e.preventDefault();
        window.open($(this).attr("href"));
    });
});

当我使用<a id="ext_link" href="http"//www.google.com">GOOGLE HOME</a> 时它工作正常，但是当我使用<a id="ext_link" href="www.google.com">GOOGLE HOME</a> 时会打开一个新窗口并且地址栏包含http://localhost/app/www.google.com 这显然是错误的地址...

如何防止在开头自动添加http://localhost/app/。

【问题讨论】：

您必须提供http://（或任何协议），否则将被解释为相对链接。
在href中提供网址时，您应该提供完整的网址，包括http ot https
如果不添加则检查字符串是否以http(s)?://开头。
试试href="//www.google.com"

标签： javascript php jquery html

【解决方案1】：

您可以使用正则表达式来测试您的href 是否以http:// 或https:// 开头，如果不是则添加http://：

$(document).ready(function(){
    $("#ext_link").click(function(e){
        e.preventDefault();
        var url = $(this).attr("href");
        if(!/^(http|https):\/\//.test(url)){
            url = "http://" + url;
        }
        window.open(url);
    });
});

【讨论】：

那些已经有http://并得到http://http://www.google.com的链接呢？

【解决方案2】：

检查 href 是否不包含 http:// 并像这样添加它：

$(document).ready(function(){
    $("#ext_link").click(function(e){
        e.preventDefault();
        var url = $(this).attr("href");
        if(!/^https?:\/\//.test(url)){
            url = "http://" + url;
        }
        window.open(url);
    });
});

您可以添加更多协议，但https?:// 应该足够了。或者您可以使用//，因为许多现代浏览器都使用它并获得适当的协议。

【讨论】：