web-dev-qa-db-fra.com

Ajout du préfixe "http: //" à une URL qui ne contient pas déjà "http: //"

J'ai un champ input qui enregistre une URL, j'aimerais que cette entrée enregistrée reconnaisse le moment où "Http //" est absent du début de la variable, mais je ne sais pas par où commencer ... est-il possible de cocher uniquement une partie d'une ficelle? - alors avoir une fonction qui sera ajoutée si nécessaire?

javascripthtmlvariables
34
David

Une solution simple pour ce que vous voulez est la suivante:

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

Cependant, il y a quelques choses que vous devriez être au courant de ...

Le test ici est sensible à la casse. Cela signifie que si la chaîne est initialement Http://example.com, elle sera remplacée par http://Http://example.com, ce qui n'est probablement pas ce que vous voulez. Vous ne devriez probablement pas non plus modifier une chaîne commençant par foo:// sinon vous pourriez vous retrouver avec quelque chose comme http://https://example.com.

D'un autre côté, si vous recevez une entrée telle que example.com?redirect=http://othersite.com, vous voudrez probablement ajouter le http:// avant d'ajouter: il peut donc ne pas suffire de chercher :// pour une solution générale.

Approches alternatives

  • En utilisant une expression régulière:

    if (!s.match(/^[a-zA-Z]+:\/\//))
{
    s = 'http://' + s;
}

  • Utilisation d'une bibliothèque d'analyse d'URI telle que JS-URI .

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

Questions connexes

63
Mark Byers

Si vous souhaitez également autoriser "https: //", j'utiliserais une expression régulière comme celle-ci:

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

Si vous n'êtes pas familier avec les expressions régulières, voici ce que chaque partie signifie.

  • ^ - Ne correspond qu'au début de la chaîne
  • http - Correspond à la chaîne littérale "http"
  • s? - Correspond éventuellement à un "s"
  • : - Correspond à un colon
  • \/\/ - Échappe aux caractères "/" puisqu'ils marquent le début/la fin de l'expression régulière
  • Le "i" après l'expression régulière le rend insensible à la casse et correspond donc à "HTTP: //", etc.
89
Matthew Crumley

Levé de la Linkenizer (Null ne dérange pas)

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

Cela ajoutera 'http://' à link s'il ne trouve pas le protocole ://. Cela ne fonctionnera pas bien si :// apparaît ailleurs dans la chaîne, mais c'est assez bon.

Exemples:

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

Puisque vous avez dit que vous enregistrez cette URL, ce serait une meilleure idée de le faire côté serveur, afin que les clients dont js est désactivé ne gâchent pas les liens. 

18
quantumSoup

Voici ce que j'utilise pour la gratification instantanée. utiliser l'écouteur keyup dans 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

J'ai modifié la réponse de @Mark Byers pour inclure également "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;
}
4
Morgan Taylor

L'extrait de code ci-dessous vérifie:

  • Vérifie si l'URL n'est pas vide
  • Supprime les espaces vides au début ou à la fin

  • Vérifications pour http://example.com, https://example.com AND //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
}
2
Akshay Goyal

Quelque chose comme ça (écrire de mémoire)?

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

ES6, une doublure

Voici une approche "moderne":

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

Vous pouvez maintenant utiliser withHttp comme fonction:

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

Personnellement, j'utilise ceci, qui est partiellement tiré de la documentation php

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

J'ai modifié les réponses de @Morgan Taylor et @Mark Byer pour qu'elles soient insensibles à la casse. Fonctionne avec http: // et 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