Correspondance Regex avec les URL de sites web courants

Question

J'ai un composant que je veux utiliser pour les formulaires et c'est pour websites . Cependant, il existe plusieurs modèles possibles :

• https://www.website.com
• http://www.website.com
• www.website.com

Question :

Comment puis-je définir le modèle de l'entrée pour tenir compte de ces modèles d'URL possibles ?

Composant.tsx :

<Form.Control
  type="url"
  placeholder="Website"
  pattern="https?://.*"
  onChange={(event: React.ChangeEvent<HTMLInputElement>) => setValue((event.target.value).toLowerCase())}
  maxLength={100}
/>

Answer 1

Pour certains correspondance des URL des sites Web de base vous pourriez :

^(https?:\/\/|www\.)\S+\.\w+$

Qui correspondra :

https://www.website.com  
http://www.website.com  
http://website.com  
http://www.com           (yep, that's a valid website)
www.website.com  

mais pas

https://website
http://.com
website.com
www.com
website

"de base" en raison de la \S+ permet simplement de s'assurer que le domaine ne contient pas de caractères d'espacement.

Exemple de Regex101.com