Geldigheid testen van een URL

In het artikel Geldigheid testen van een e-mail adres wordt besproken hoe je van een e-mail adres kunt nagaan of het correct gevormd is. Dat gebeurt met een reguliere expressie. Op deze bladzijde wordt besproken hoe je zoiets kunt doen voor de URL van een webpagina.

Hieronder zie je een formuliertje met één tekstveld. Als je daar de URL van een webpagina invult en dan op de knop Test! drukt, komt er een alert op het scherm die zegt of de URL correct is gevormd of niet.
Je moet ook het protocol invullen (http://, https:// of ftp://), anders is de URL bij voorbaat fout. Je mag ook een query-string meegeven, maar ook dat hoeft niet.
Een query-string is een vraagteken gevolgd door een reeks karakters, die wordt gebruikt om gegevens over te brengen van de ene webpagina naar de andere. Zie bijvoorbeeld het item HTML met parameters.

Op deze pagina staat beschreven hoe je dat aanpakt. De code staat onderaan deze bladzijde. Je kunt hem ook downloaden voor je eigen gebruik.

• De code bestaat uit een eenvoudig formulier waarin de URL van een webpagina wordt gevraagd. Als de knop Test! wordt ingedrukt wordt de JavaScript-function TestTheURL() gestart. Deze function haalt de opgegeven URL uit het tekstveld en laat daar de function VerifyUrl_check(str) op los.
• De parameter str van de function VerifyUrl_check(str) is de inhoud van het tekstveld.
• De function VerifyUrl_check(str) verwijdert eerst de 'whitespace' (spaties e.d.) aan het begin en het einde van str. Er wordt dus een TRIM-actie op uitgevoerd.
  Hiermee wordt voorkomen dat het script wordt misleid doordat er per ongeluk spaties aan het begin en/of einde van de URL worden getypt.
• Daarna controleert VerifyUrl_check(str) of str een correct geformatteerde URL is. Als dat zo is geeft de function de waarde true terug. Anders geeft de function false terug.
• TestTheURL() toont een alert, afhankelijk van de return-waarde van VerifyUrl_check(str).
   
• In de function VerifyUrl_check(str) wordt een "Reguliere Expressie" gebruikt. Dit is een speciale manier om zoekpatronen in tekststrings mee te beschrijven.
   
• Je kent vast wel de beschrijving *.txt om alle tekstfiles in een directory te laten zien. Het sterretje wordt jokerteken of wildcard genoemd. Reguliere expressies werken ook met een soort jokertekens om patronen in een tekst mee te beschrijven.
• De techniek is afkomstig uit het UNIX-operating system. Daar tref je het aan in de filters awk en sed, maar ook in de editors ed, vi en emacs. Later is het ook ingebouwd in allerhande web-design talen.
• Helaas is er toch niet zoiets als de 'standaard' reguliere expressie taal. Het gaat eerder om verschillende dialecten. De programmeertaal Perl beschikt waarschijnlijk de meest complete set reguliere expressies.
  Gelukkig volgen al deze verschillende vormen van reguliere expressies wel dezelfde principes. Als je het basis-idee onder de knie hebt, leer je gemakkelijk de verschillende dialecten aan.
• Ook JavaScript is, vanaf versie 1.1, uitgerust met uitgebreide mogelijkheden om reguliere expressies te gebruiken.
   
• Het voert in het kader van dit onderwerp te ver om diep op de reguliere expressie techniek in te gaan. Zie daarvoor het item "Reguliere Expressies in JavaScript".
• De function VerifyURL_check(str) gebruikt twee reguliere expressies. De eerste is:

  /(^\s*)|(\s*$)/g

  Het betekent het volgende:
  • Alle 'whitespace'-karakters die aan het begin of einde van de string staan worden gevonden. Ze worden met behulp van de String-methode replace() vervangen door een 'lege' string; ze worden dus verwijderd.
  • Het hangt af van de browser wat als 'whitespace'-karakter wordt gezien. Het is altijd een spatie, maar het kan ook zijn een horizontale of verticale tab, carriage return, linefeed, enz.
    Alleen spaties zijn voor deze toepassing van belang, dus deze expressie volstaat.
    De tweede reguliere expressie kijkt of het een correcte URL zou kunnen zijn:

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

  Het betekent het volgende:
  • Het moet beginnen met de aanduiding voor een internet-protocol (http://, https:// of ftp://).
  • Daarna volgt een (onbepaald) aantal karakters dat gebruikt mag worden om een URL mee weer te geven. Het eerste karakter moet een letter of cijfer zijn.
  • De query-string mag in deze expressie alle karakters bevatten, dus andere query-strings zijn –conform de HTTP-standaarden– ook mogelijk.
  • Het geheel is hoofdletter-onafhankelijk.
   
• Met deze aanpak is het ook mogelijk om een IP-adres als URL op te geven.
   
• De function VerifyUrl_check(str) vergelijkt de opgegeven string met de reguliere expressies.
  Voor de vergelijking worden de methodes replace en match van het String-object gebruikt, alsmede de methode test van het RegExp-object.
  De reguliere expressie staat niet tussen (enkele of dubbele) aanhalingstekens!

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<script>
function TestTheURL() {
  // Check de juistheid van het e-mail adres. Dit gebeurt met een Reguliere Expressie.
  // Gebaseerd op een code-snippet op snippets.dzone.com
  // Author : Rafael Trindade da Silva, rafaeltds at gmail dot com
  if (VerifyUrl_check(document.f.t.value)) {
    window.alert('De opgegeven URL is juist...')
  } else {
    window.alert('De opgegeven URL is NIET juist!')
    document.f.t.focus();
  }
}
function VerifyUrl_check(str) {
  str=str.replace(/(^\s*)|(\s*$)/g, "");
  var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
  return regexp.test(str)
}
</script>

<form action="JavaScript:TestTheURL();" name="f" id="f">
<table border="1" cellspacing="1" cellpadding="5" align="center" bgcolor="#DDFFDD" frame="box" rules="none"><tr>
  <td colspan="2" align="center">
    Vul hier een URL in:<br>
    <input type="text" name="t" size="30" maxlength="50"></td>
</tr><tr>
  <td align="center">
    <input type="submit" value=" Test! "></td>
    <td align="center"><input type="reset" value="Opnieuw..."></td>
</tr></table></form>

Downloaden:
 
Druk op de knop:  File: voorb327.zip, 850 bytes.