Обработка адреса сайта

174
25 апреля 2018, 03:23

Добрый вечер. Есть такое условие:

 Проверка должна срабатывать при любом формате ввода адреса:
site.com
www.site.com
http://site.com
https://site.com

Подскажите, как реализовать корректную обработку адреса в поле, чтобы скрипт работал корректно? Предполагаю, что с помощью паттернов?

Answer 1

Вероятно, вам подойдёт html5 input[type=url]

<input type="url" />

RFC3986 определяет следующий паттерн для URI: ^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?

Можно уточнить поле ввода своим паттерном (вы же не хотите всякие ftp://...?)

Например:

<input type="url" pattern="https?://.+"/>

Или что-то посложнее:

<input type="url" pattern="^(?:https?://)?(?:www\.)?(?:[^\/\.]+\.)+[^\/\.]+"/>

Тест регулярки: 

const reg = /^(?:https?:\/\/)?(?:www\.)?(?:[^\/\.]+\.)+[^\/\.]+/; 
 
const samples = [ 
  'http://www.example.com', 
  'https://example.com', 
  'www.example.com', 
  'example.com', 
]; 
 
console.log(samples.map(sample => reg.test(sample))); 
 
document.querySelector('button').addEventListener('click', () => { 
  console.log(document.querySelector('input').validity.valid) 
});
<input type="url" pattern="^(?:https?://)?(?:www\.)?(?:[^\/\.]+\.)+[^\/\.]+"/> <!-- Регулярка изменена, иначе --> 
<button>Check</button>

Использован ответ с enSO

READ ALSO
Как повернуть по вертикале `dots` в slick slider?
HTML

Как повернуть по вертикале `dots` в slick slider?

Как повернуть точки с горизонтального положения в вертикальное?

 172
Склеивание слов minifyHTML
HTML

Склеивание слов minifyHTML

Столкнулся с проблемой при минификации HTML, некоторые слова между которыми есть <br> - в моб версии делаем ему br { display: none }И вместо Привет...

 199
Отображение текста
HTML

Отображение текста

Подскажите, в какие теги вставлять текст, который я вывожу из БД, чтобы он отобразился красиво (как есть)? Вроде ерундовая проблема, а не получается,...

 181
Загрузка файла через ajax
HTML

Загрузка файла через ajax

есть такая проблемаВот такой блок:

 210