it-swarm.com.de

URL mit JavaScript überprüfen

Ich möchte eine URL überprüfen und eine Nachricht anzeigen. Unten ist mein Code:

$("#pageUrl").keydown(function(){
        $(".status").show();
        var url = $("#pageUrl").val();

        if(isValidURL(url)){

        $.ajax({
            type: "POST",
            url: "demo.php",
            data: "pageUrl="+ url,
            success: function(msg){
                if(msg == 1 ){
                    $(".status").html('<img src="images/success.gif"/><span><strong>SiteID:</strong>12345678901234456</span>');
                }else{
                    $(".status").html('<img src="images/failure.gif"/>');
                }
            }
            });

            }else{

                    $(".status").html('<img src="images/failure.gif"/>');
            }

    });


function isValidURL(url){
    var RegExp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;

    if(RegExp.test(url)){
        return true;
    }else{
        return false;
    }
} 

Mein Problem ist jetzt, dass eine Fehlermeldung angezeigt wird, auch wenn eine richtige URL eingegeben wird, bis sie mit dem regulären Ausdruck übereinstimmt, und es wird true zurückgegeben, auch wenn die URL etwa "http://wwww" ist.

Ich freue mich über Ihre Vorschläge.

83
vinay

Jemand erwähnte das Jquery-Validierungs-Plugin. Es scheint übertrieben zu sein, wenn Sie nur die URL überprüfen möchten. Hier ist die Zeile der Regex aus dem Plugin:

return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);

Hier haben sie es bekommen: http://projects.scottsplayground.com/iri/

Von @nhahtdh hingewiesen Dies wurde aktualisiert auf:

        // Copyright (c) 2010-2013 Diego Perini, MIT licensed
        // https://Gist.github.com/dperini/729294
        // see also https://mathiasbynens.be/demo/url-regex
        // modified to allow protocol-relative URLs
        return this.optional( element ) || /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)[email protected])?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test( value );

source: https://github.com/jzaefferer/jquery-validation/blob/c1db10a34c0847c28a5bd30e3ee1117e137ca834/src/core.js#L1349

67
artfulhacker

Es ist nicht praktisch, URLs mit Regex zu analysieren. Eine vollständige Implementierung der RFC1738-Regeln würde zu einem enorm langen Regex führen (vorausgesetzt, es ist sogar möglich). Ihr aktueller Ausdruck schlägt zwar viele gültige URLs fehl und übergibt ungültige.

Stattdessen:

ein. Verwenden Sie einen richtigen URL-Parser, der den tatsächlichen Regeln entspricht. (Ich kenne keinen für JavaScript; es wäre wahrscheinlich übertrieben. Sie könnten es jedoch auf der Serverseite tun). Oder,

b. Schneiden Sie einfach führende oder nachgestellte Leerzeichen weg und überprüfen Sie, ob eines der bevorzugten Schemata auf der Vorderseite angezeigt wird (normalerweise "http: //" oder "https: //"), und belassen Sie es dabei. Oder,

c. Versuchen Sie, die URL zu verwenden und zu sehen, was am Ende liegt, indem Sie sie zum Beispiel per HTTP HEAD an den Server senden. Wenn Sie einen 404- oder Verbindungsfehler erhalten, ist dies wahrscheinlich falsch.

es gibt true zurück, auch wenn die URL etwas wie " http: // wwww " ist.

Nun, das ist in der Tat eine vollkommen gültige URL.

Wenn Sie überprüfen möchten, ob ein Hostname wie "wwww" tatsächlich vorhanden ist, haben Sie keine andere Wahl, als im DNS nachzuschlagen. Dies wäre wiederum serverseitiger Code.

47
bobince
function validateURL(textval) {
    var urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
    return urlregex.test(textval);
}

Dies kann für URLs wie:

http://stackoverflow.com/questions/1303872/url-validation-using-javascript

oder:

http://regexlib.com/DisplayPatterns.aspx?cattabindex=1&categoryId=2
33
Mohesh Mohan

Ich habe auch eine URL-Validierungsfunktion auf rfc1738 und rfc3986 geschrieben, um http- und https-URLs zu überprüfen. Ich versuche, dieses Modul modular zu halten, damit es besser gewartet und an die eigenen Anforderungen angepasst werden kann.

Das RegExp in einer Zeile wird am Ende dieses Beitrags angezeigt.

Das RegExp akzeptiert HTTP- und HTTPS-URLs mit einer internationalen Domänen- oder IPv4-Nummer. IPv6 wird noch nicht unterstützt. 

window.isValidURL = (function() {// wrapped in self calling function to prevent global pollution

     //URL pattern based on rfc1738 and rfc3986
    var rg_pctEncoded = "%[0-9a-fA-F]{2}";
    var rg_protocol = "(http|https):\\/\\/";

    var rg_userinfo = "([a-zA-Z0-9$\\-_.+!*'(),;:&=]|" + rg_pctEncoded + ")+" + "@";

    var rg_decOctet = "(25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9]|[1-9][0-9]|[0-9])"; // 0-255
    var rg_ipv4address = "(" + rg_decOctet + "(\\." + rg_decOctet + "){3}" + ")";
    var rg_hostname = "([a-zA-Z0-9\\-\\u00C0-\\u017F]+\\.)+([a-zA-Z]{2,})";
    var rg_port = "[0-9]+";

    var rg_hostport = "(" + rg_ipv4address + "|localhost|" + rg_hostname + ")(:" + rg_port + ")?";

    // chars sets
    // safe           = "$" | "-" | "_" | "." | "+"
    // extra          = "!" | "*" | "'" | "(" | ")" | ","
    // hsegment       = *[ alpha | digit | safe | extra | ";" | ":" | "@" | "&" | "=" | escape ]
    var rg_pchar = "a-zA-Z0-9$\\-_.+!*'(),;:@&=";
    var rg_segment = "([" + rg_pchar + "]|" + rg_pctEncoded + ")*";

    var rg_path = rg_segment + "(\\/" + rg_segment + ")*";
    var rg_query = "\\?" + "([" + rg_pchar + "/?]|" + rg_pctEncoded + ")*";
    var rg_fragment = "\\#" + "([" + rg_pchar + "/?]|" + rg_pctEncoded + ")*";

    var rgHttpUrl = new RegExp( 
        "^"
        + rg_protocol
        + "(" + rg_userinfo + ")?"
        + rg_hostport
        + "(\\/"
        + "(" + rg_path + ")?"
        + "(" + rg_query + ")?"
        + "(" + rg_fragment + ")?"
        + ")?"
        + "$"
    );

    // export public function
    return function (url) {
        if (rgHttpUrl.test(url)) {
            return true;
        } else {
            return false;
        }
    };
})();

RegExp in einer Zeile:

var rg = /^(http|https):\/\/(([a-zA-Z0-9$\-_.+!*'(),;:&=]|%[0-9a-fA-F]{2})[email protected])?(((25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9]|[1-9][0-9]|[0-9])(\.(25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9]|[1-9][0-9]|[0-9])){3})|localhost|([a-zA-Z0-9\-\u00C0-\u017F]+\.)+([a-zA-Z]{2,}))(:[0-9]+)?(\/(([a-zA-Z0-9$\-_.+!*'(),;:@&=]|%[0-9a-fA-F]{2})*(\/([a-zA-Z0-9$\-_.+!*'(),;:@&=]|%[0-9a-fA-F]{2})*)*)?(\?([a-zA-Z0-9$\-_.+!*'(),;:@&=\/?]|%[0-9a-fA-F]{2})*)?(\#([a-zA-Z0-9$\-_.+!*'(),;:@&=\/?]|%[0-9a-fA-F]{2})*)?)?$/;
15
TLindig

In einer ähnlichen Situation bin ich damit durchgekommen:

someUtils.validateURL = function(url) {
    var parser = document.createElement('a');
    try {
        parser.href = url;
        return !!parser.hostname;
    } catch (e) {
        return false;
    }
};

warum also das Rad erfinden, wenn Browser es für Sie tun können? Dies funktioniert natürlich nur im Browser. 

es gibt verschiedene Teile der analysierten URL, genau wie der Browser sie interpretieren würde:

parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port;     // => "8080"
parser.pathname; // => "/path/"
parser.search;   // => "?search=test"
parser.hash;     // => "#hash"
parser.Host;     // => "example.com:3000"

Mit diesen können Sie Ihre Validierungsfunktion je nach Anforderung verbessern. Der einzige Nachteil ist, dass es relative URLs akzeptiert und Host und Port des aktuellen Seitenservers verwendet. Sie können es jedoch zu Ihrem Vorteil nutzen, indem Sie die URL aus Teilen zusammensetzen und immer vollständig an Ihren AJAX - Service übergeben.

Was validateURL nicht akzeptiert, ist eine ungültige URL, z. http:\:8883 gibt false zurück, aber :1234 ist gültig und wird als http://pagehost.example.com/:1234 interpretiert, d. h. als relativer Pfad. 

AKTUALISIEREN

Dieser Ansatz funktioniert nicht mehr mit Chrome und anderen WebKit-Browsern. Selbst wenn die URL ungültig ist, wird der Hostname mit einem Wert gefüllt, z. genommen von base. Es hilft immer noch, Teile der URL zu parsen, erlaubt aber nicht, eine URL zu überprüfen.

Ein besserer Ansatz ohne eigene Parser-Methode besteht darin, var parsedURL = new URL(url) zu verwenden und Ausnahmen abzufangen. Siehe z. URL API . Wird von allen gängigen Browsern und NodeJS unterstützt, ist jedoch noch als experimentell gekennzeichnet.

12
Alex Pakka

bester Regex, den ich gefunden habe von http://angularjs.org/

var urlregex = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/;

8
nguyên

Ich weiß, dass dies eine ziemlich alte Frage ist, aber da es keine akzeptierte Antwort gibt, schlage ich vor, das URI.js-Framework zu verwenden: https://github.com/medialize/URI.js

Sie können es verwenden, um mit einem try/catch-Block nach fehlerhafter URI zu suchen:

function isValidURL(url)
{
    try {
        (new URI(url));
        return true;
    }
    catch (e) {
        // Malformed URI
        return false;
    }
}

Natürlich wird etwas wie "% @" als wohlgeformte relative URI betrachtet ... Ich schlage vor, Sie lesen die URI.js API , um weitere Überprüfungen durchzuführen, beispielsweise, wenn Sie dies sicherstellen möchten Der Benutzer hat eine wohlgeformte absolute URL eingegeben, die Sie folgendermaßen tun können:

function isValidURL(url)
{
    try {
        var uri = new URI(url);
        // URI has a scheme and a Host
        return (!!uri.scheme() && !!uri.Host());
    }
    catch (e) {
        // Malformed URI
        return false;
    }
}
6
Romain

Das hat bei mir funktioniert:

function validateURL(value) {
    return /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
    }

von dort ist es nur eine Frage des Aufrufs der Funktion, um ein wahres oder falsches Ergebnis zu erhalten:

validateURL(urltovalidate);
3
Crisman

Import in ein npm-Paket wie

https://www.npmjs.com/package/valid-url

und verwenden Sie es, um Ihre URL zu überprüfen.

2
ooolala
var RegExp = (/^HTTP|HTTP|http(s)?:\/\/(www\.)?[A-Za-z0-9]+([\-\.]{1}[A-Za-z0-9]+)*\.[A-Za-z]{2,40}(:[0-9]{1,40})?(\/.*)?$/);
1
SagarPPanchal

Sie können die URL API verwenden, die vor kurzem Standard ist. Die Browser-Unterstützung ist am besten skizzenhaft, siehe den Link. new URL(str) gibt garantiert aus, TypeError für ungültige URLs auszulösen.

Wie oben angegeben, ist http://wwww eine gültige URL.

1
amoe

Wenn Sie einen zuverlässigeren Regex suchen, schauen Sie sich RegexLib an. Hier ist die Seite, die Sie wahrscheinlich interessieren würde:

http://regexlib.com/Search.aspx?k=url

Ändern Sie bei Fehlermeldungen, die angezeigt werden, während die Person noch tippt, das Ereignis von keydown in blur. Dann wird es nur geprüft, wenn die Person zum nächsten Element wechselt.

1
nickf

Meine Lösung:

function isValidUrl(t)
{
    return t.match(/^(http|https|ftp):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+)(:(\d+))?\/?/i)
}
1
Dung Vu

Ich habe viele URL-Validatoren in Google geprüft und niemand arbeitet für mich. Zum Beispiel würde ich gerne Links auf "aa.com" sehen. Ich mag albern nach Punktzeichen in der Zeichenfolge.

function isValidUri(str) {
  var dotIndex = str.indexOf('.');
  return (dotIndex > 0 && dotIndex < str.length - 2);
}

Es sollte nicht am Anfang und Ende der Zeichenfolge bleiben (derzeit haben wir keine Top-Level-Domänennamen mit einem Zeichen). 

0
alex naumov

Demo: http://jsbin.com/uzimeb/1/edit

function checkURL(value) {
    var urlregex = new RegExp("^(http|https|ftp)\://([a-zA-Z0-9\.\-]+(\:[a-zA-Z0-9\.&amp;%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&amp;%\$#\=~_\-]+))*$");
    if (urlregex.test(value)) {
        return (true);
    }
    return (false);
}
0
Yasser

Ich habe eine großartige Ressource für den Vergleich verschiedener Lösungen gefunden: https://mathiasbynens.be/demo/url-regex

Laut dieser Seite besteht nur eine Lösung von diegoperini alle Tests. Hier ist dieser Regex:

_^(?:(?:https?|ftp)://)(?:\S+(?::\S*)[email protected])?(?:(?!10(?:\.\d{1,3}){3})(?!127(?:\.\d{1,3}){3})(?!169\.254(?:\.\d{1,3}){2})(?!192\.168(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\x{00a1}-\x{ffff}0-9]+-?)*[a-z\x{00a1}-\x{ffff}0-9]+)(?:\.(?:[a-z\x{00a1}-\x{ffff}0-9]+-?)*[a-z\x{00a1}-\x{ffff}0-9]+)*(?:\.(?:[a-z\x{00a1}-\x{ffff}]{2,})))(?::\d{2,5})?(?:/[^\s]*)?$_iuS
0
Zoran P.