URl регулярное выражение валидатор HTML5

Question

Я проверяю URL в моей форме через регулярное выражение.

^ (?: Http (s)?: //)? [\ W.-] + (?:. [\ W.-] +) + [\ w -._ ~: /? # [] @! \ $ & '() * +,; =.] + $

Проверяет все URL, например:

https://www.example.com http://www.example.com www.example.com example.com http://blog.example.com http://www.example.com/product http://www.example.com/products?id=1&page=2 http://www.example.com # up http://255.255.255.255 255.255.255.255

Однако он также проверяет URL-адрес, например
www.google www.example www.example. www.google. которые не принимают URL-адреса

Я не слишком эффективен с регулярными выражениями.Пожалуйста, помогите, что нужно изменить

Answer 1

При использовании атрибута regex в HTML5 pattern вы должны очень тщательно экранировать символы, так как те браузеры, в которых реализован стандарт ES6 +, могут выдавать исключение, когда они "видят" [\w\.-] (не нужно экранировать точку и один разшаблон скомпилирован с флагом u, это становится ошибкой).

Теперь, чтобы исправить проблему, вы можете добавить (?!www\.[^.]+\.?$) упреждения после ^, чтобы сбить все входные данные, которые начинаются с www.и затем иметь любые 0 или более символов, отличных от ., а затем необязательный . в конце строки.

Вы можете использовать

^(?!www\.[^.]+\.?$)(?:https?:\/\/)?[\w.-]+(?:\.[\w.-]+)+[\w._~:/?#[\\\]@!$&'()*+,;=.-]+$

См. regex demo .Заметьте, что в вашем шаблоне я избежал \ и ], думаю, вы хотели сопоставить оба (ваше исходное регулярное выражение не соответствует \ с [\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]).

Обратите внимание, что HTML5 pattern regex привязано по умолчанию, вам не нужны ^ и $ в начале / конце:

pattern="(?!www\.[^.]+\.?$)(?:https?:\/\/)?[\w.-]+(?:\.[\w.-]+)+[\w._~:/?#[\\\]@!$&'()*+,;=.-]+"

Но вы все равно можете оставить их, если хотите.