将“http://”添加到尚未包含“http://”的 URL

问题描述 投票:0回答:13

我有一个保存 URL 的

input
字段,我希望这个保存的输入能够识别变量开头不存在“Http//”的情况,但不知道从哪里开始......是否可以只检查字符串的一部分? - 然后有一个在必要时追加的函数?

javascript html variables
13个回答
127
投票

如果您还想允许“https://”,我会使用如下正则表达式:

if (!/^https?:\/\//i.test(url)) {
    url = 'http://' + url;
}

如果您不熟悉正则表达式,以下是每个部分的含义。

  • ^
    - 仅匹配字符串的开头
  • http
    - 匹配文字字符串“http”
  • s?
    - 可选择匹配“s”
  • :
    - 匹配冒号
  • \/\/
    - 转义“/”字符,因为它们标记正则表达式的开始/结束
  • 正则表达式后面的“i”使其不区分大小写,因此它将匹配“HTTP://”等

80
投票

您想要的一个简单解决方案如下:

var prefix = 'http://';
if (s.substr(0, prefix.length) !== prefix)
{
    s = prefix + s;
}

但是有一些事情你应该注意...

这里的测试区分大小写。这意味着如果字符串最初是

Http://example.com
,这会将其更改为
http://Http://example.com
,这可能不是您想要的。您可能也不应该修改任何以
foo://
开头的字符串,否则最终可能会得到类似
http://https://example.com
的结果。

另一方面,如果您收到诸如

example.com?redirect=http://othersite.com
之类的输入,那么您可能确实想在前面添加
http://
,因此仅搜索
://
对于一般解决方案来说可能不够好。

替代方法

  • 使用正则表达式:

    if (!s.match(/^[a-zA-Z]+:\/\//))
    {
        s = 'http://' + s;
    }
    
  • 使用URI解析库,例如JS-URI

    if (new URI(s).scheme === null)
    {
        s = 'http://' + s;
    }
    

相关问题


38
投票

Linkenizer 提升(Null 不介意)

link = (link.indexOf('://') === -1) ? 'http://' + link : link;

如果找不到指示协议的

'http://'
,则会在
link
前面加上
://
。如果
://
出现在字符串中的其他位置,这将无法正常工作,但它已经足够好了。

示例:

http://www.google.com -> http://www.google.com
ftp://google.com      -> ftp://google.com
www.google.com        -> http://www.google.com
google.com            -> http://google.com

既然你说要保存这个URL,那么最好在服务器端执行此操作,这样禁用了js的客户端就不会弄乱链接。


27
投票

ES6,一缸

这是一种“现代”方法:

const withHttp = url => !/^https?:\/\//i.test(url) ? `http://${url}` : url;

您现在可以使用

withHttp
作为函数:

const myUrl = withHttp("www.example.org");

10
投票

ES6,一内胆

const withHttp = (url) => url.replace(/^(?:(.*:)?\/\/)?(.*)/i, (match, schemma, nonSchemmaUrl) => schemma ? match : `http://${nonSchemmaUrl}`);

测试(全部返回

http://www.google.com
):

  • www.google.com
  • google.com
  • //google.com
  • http://www.google.com
  • https://www.google.com
  • ftp://www.google.com

如果有人需要知道它是如何工作的,请添加评论,我将添加解释。


8
投票

这是我用来即时满足的东西。在 jquery 中利用 keyup 监听器。

$('#url').on("keyup", function () {
    if ((this.value.length >=5)
      && (this.value.substr(0, 5) != 'http:')
      && (this.value.substr(0, 5) != 'https')) {
        this.value = 'http://' + this.value;
    }
});

6
投票

下面的代码片段检查:

  • 检查 url 是否不为空
  • 删除开头或结尾处的杂散空格
  • 检查 http://example.comhttps://example.com//example.com

    if (!!url && !!url.trim()) { //Check if url is not blank
        url = url.trim(); //Removes blank spaces from start and end
        if (!/^(https?:)?\/\//i.test(url)) { //Checks for if url doesn't match either of: http://example.com, https://example.com AND //example.com
            url = 'http://' + url; //Prepend http:// to the URL
        }
    } else {
        //Handle empty url
    }
    

5
投票

我更改了@Mark Byers 的答案,以包含“https://”。

function formatUrl(url){
    var httpString = 'http://'
        , httpsString = 'https://'
        ;

    if (url.substr(0, httpString.length) !== httpString && url.substr(0, httpsString.length) !== httpsString)
        url = httpString + url;

    return url;
}

3
投票

您可以通过使用

new URL()
:

来避免正则表达式(从而避免另一个问题)

function newURL(string) {
  let url;
  try {
    url = new URL(string);

    if (!url.hostname) {
      // cases where the hostname was not identified
      // ex: user:[email protected], example.com:8000
      url = new URL("https://" + string);
    }
  } catch (error) {
    url = new URL("https://" + string);
  }

  return url;
}

const url = newURL('google.com');

console.log(url); // "https://google.com/"

它适用于任何字符串,请参阅包https://www.npmjs.com/package/new-url


2
投票

类似这样的东西(凭记忆写)?

if (url.toUpper(url.substring(0, 7) != "HTTP://")
  url = "http://" + url;

2
投票
if (url.indexOf('http://') != 0)
    url = 'http://' + url;

0
投票

我将@Morgan Taylor 和@Mark Byer 的答案更改为不区分大小写。适用于 http:// 和 https://

function formatUrl(url)
{
    var httpString = "http://";
    var httpsString = "https://";
    if (url.substr(0, httpString.length).toLowerCase() !== httpString && url.substr(0, httpsString.length).toLowerCase() !== httpsString)
                url = httpString + url;
    return url;
}

-1
投票

您可以使用 System.String 的成员“StartsWith”。

if (url.ToUpper().StartsWith("HTTP://"))
{ 

}
© www.soinside.com 2019 - 2024. All rights reserved.