web-dev-qa-db-ja.com

「http：//」がまだ含まれていないURLの前に「http：//」を追加する

URLを保存するinputフィールドがあります。変数の先頭に "Http //"がない場合にこの保存された入力を認識したいのですが、どこから始めればよいのかわかりません...文字列の一部のみをチェックすることは可能ですか？ -その後、必要に応じて追加する機能がありますか？

javascripthtmlvariables
40
David

必要なものに対する簡単な解決策は次のとおりです。

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

  • JS-URI などのURI解析ライブラリを使用します。

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

関連する質問

67
Mark Byers

「https：//」も許可する場合は、次のような正規表現を使用します。

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

正規表現に慣れていない場合は、各部分の意味を以下に示します。

  • ^-文字列の先頭でのみ一致
  • http-リテラル文字列「http」に一致
  • s?-オプションで「s」に一致
  • :-コロンに一致
  • \/\/-正規表現の開始/終了を示す「/」文字をエスケープします
  • 正規表現の後の「i」は大文字と小文字を区別しないため、「HTTP：//」などに一致します。
93
Matthew Crumley

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が無効になっているクライアントがリンクを台無しにしないようにします。

23
quantumSoup

「Marks：//」も含めるように@Mark Byersの回答を変更しました。

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;
}
5
Morgan Taylor

ES6、ライナー1つ

「最新の」アプローチを次に示します。

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

これで、withHttpを関数として使用できます。

const myUrl = withHttp("www.example.org");
5
rap-2-h

ここに私が即座に満足させるために使用するものがあります。 jqueryでキーアップリスナーを使用します。

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

以下のコードスニペットは以下をチェックします。

  • URLが空白でないかどうかを確認します
  • 開始時または終了時に浮遊空白を削除します

  • http://example.com （、https： //example.comAND// 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
}
3
Akshay Goyal

このようなもの（メモリによる書き込み）？

if (url.toUpper(url.substring(0, 7) != "HTTP://")
  url = "http://" + url;
2
Eugene Mayevski 'Allied Bits
if (url.indexOf('http://') != 0)
    url = 'http://' + url;
2
Casey Chu

私は個人的にこれを使用していますが、これは部分的にphpドキュメントから取られています

$scheme = parse_url($link, PHP_URL_SCHEME);
if (empty($scheme)) {
    $link = 'http://' . ltrim($link, '/');
}
0
Satbir Kira

@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;
}
0
Edo Plantinga