Как я могу проверить URL в JavaScript с помощью регулярного выражения

Question

я хочу проверить текстовое поле, у которого есть некоторый URL-адрес, такой как адрес блога или адрес сайта Как я могу проверить это текстовое поле в JS

Answer 1

Я предполагаю, что вы знаете, как получить значение <input> с помощью JavaScript. Итак, ваша проблема - написать специальную функцию для проверки URL.

Сначала мы могли бы рассмотреть проверку правильности синтаксического URL .

Некоторые примеры того, что наш валидатор URL должен определенно рассмотреть вопрос:

http://www.example.com.
http://www.google.ee/search?q=foo&sourceid=opera&ie=utf-8&oe=utf-8
https://ama-z-on.co.uk/index.html?a=hei%20hoo
ftp://ftp.linux.ee/public/gentoo/i386/portage-snapshot.tar.bz
http://he.wikipedia.org/wiki/שטרגליים#.D7.A8.D7.90.D7.95_.D7.92.D7.9D
sftp://123.1.255.128:80/pub

И это только малая часть реального разнообразия URL-адресов. И HTTP и FTP не единственные протоколы, возможные для URL. О, чувак, эта проверка URL действительно сложна.

Но давайте предположим, что действительный URL должен начинаться с нескольких букв, затем ": //" и после этого, что когда-либо. Чтобы проверить этот тип шаблона, вы должны использовать регулярное выражение, которое в JavaScript выглядит следующим образом:

function validateUrl(url) {
  return /^[a-z]+:\/\//i.test(url);
}

Регулярные выражения - это целая большая тема, которую вы должны изучить самостоятельно, но только краткое объяснение здесь:

• / - начало регулярного выражения
• ^ - соответствует началу строки
• [a-z] - соответствует либо a, b, c, ..., x, y, либо z.
• + - означает, что предыдущий паттерн можно повторить один или несколько раз.
• : - соответствует самому символу двоеточия.
• \/ - соответствует прямой косой черте / (без обратной косой черты JavaScript будет считать, что это конец регулярного выражения).
• / - заканчивает регулярное выражение.
• i - это модификатор, который делает это регулярное выражение нечувствительным к регистру.
• .test(url) - вызывает метод test объекта регулярного выражения с url в качестве параметра. Когда параметр соответствует регулярному выражению, он возвращает true, в противном случае false.

Кроме того, вы можете разрешить ввод URL-адреса без части http:// - это означает, что вам действительно нужно проверить доменное имя или IP-адрес или что-то еще после него.

Полагаю, вы сейчас довольно смущены, и это намеренно. Вы действительно не должны писать JavaScript для самостоятельной проверки URL, слишком сложно сделать это правильно. Вместо этого вам следует использовать библиотечную функцию , которая проверена и подтверждена многими экспертами.

Возможно, используемая вами JavaScript-фреймворк уже имеет хороший инструмент для этой работы. В этом случае используйте его. К сожалению, я не могу предложить какую-либо конкретную библиотеку для проверки URL.

Кроме того, возможно, вы захотите пропинговать URL , как предложил Джош Стодола, чтобы убедиться, что он действительно существует. Хотя, как подсказывает Джош, это может быть проблематично, если ресурс, на который ссылается URL, имеет размер 10 ГБ:)

Answer 2

Сделайте базовый тест RegExp для форматирования. Затем проверьте связь с URL-адресом, используя XMLHttpRequest , чтобы убедиться, что он существует. Пример использования jQuery ...

var url = $("#txtUserWebSite").val();
var reg = /^(([\w]+:)?\/\/)?(([\d\w]|%[a-fA-f\d]{2,2})+(:([\d\w]|%[a-fA-f\d]{2,2})+)?@)?([\d\w][-\d\w]{0,253}[\d\w]\.)+[\w]{2,4}(:[\d]+)?(\/([,-+_~.\d\w]|%[a-fA-f\d]{2,2})*)*(\?(&?([,-+_~.\d\w]|%[a-fA-f\d]{2,2})=?)*)?(#([,-+_~.\d\w]|%[a-fA-f\d]{2,2})*)?$/; 

if(!reg.test(url)) {
  alert("Invalid URL!");
  return false;
}

$.get(url, function(dat, stat) {
  if(stat == "success")
    alert("Valid URL!");
  else
    alert("Invalid URL!");
})

Answer 3

var regExpUrl = new RegExp( "^((http|https|ftp)\://){1}([a-zA-Z0-9\.\-]+\.(\:[a-zA-Z0-9\.&%\$\-]+)*@)*((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\.\,\?\'\\\+&%\$#\=~_\-]+))*$");

var inputArrs = [
	"http://190.190.1.190:8080",
	"https://190.190.1.190:8080",
	"http://190.190.1.190:8080/",
	"http://190.190.1.190:8080/xampp/",
	"http://190.190.1.190:8080/testproject",
	"http://190.190.1.190:8080/testproject/admin/index.php",
	"http://190.190.1.190:8080/testproject/admin/index.php?a=asdf&asdf",
	"http://190.190.1.190:8080/phpmyadmin",
	"http://www.google.com.au",
	"https://www.google.com.au/asdf/asdf/asdfasdf?asdf=asdf&asdf=asdf",
	"http://google.com.au",
	"https://google.com.au",
	"www.google.com.au",
	"google.com.au",
	"http://www.google.com.au",
	"test",
	"!@#!@#!@#",
	"123",
	"210.110",
	"y.y.y.y",
	"255.0.0.y",
	"666.10.10.20",
	"4444.11.11.11",
	"33.3333.33.3",
	"190.190.1.190",
	"190.190.1.190",
	"190.190.1.190:80",
	"190.190.1.190:8080",
	"190.190.1.190:",
	
];

inputArrs.forEach(function(input) {
	if(regExpUrl.test(input)) {
		res = "URL/IP Valid";
	} else {
		res = "Invalid URL/IP";
	}
	prevVal = document.getElementById("response").innerHTML;
    document.getElementById("response").innerHTML = prevVal + "<br/>" + input + " = " + res + "<br/>";
});

<div id="response"></div>

<script>

var regExpUrl = new RegExp( "^((http|https|ftp)\://){1}([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;%\$#\=~_\-]+))*$");

var inputArrs = [
	"http://190.190.1.190:8080",
	"https://190.190.1.190:8080",
	"http://190.190.1.190:8080/",
	"http://190.190.1.190:8080/xampp/",
	"http://190.190.1.190:8080/testproject",
	"http://190.190.1.190:8080/testproject/admin/index.php",
	"http://190.190.1.190:8080/testproject/admin/index.php?a=asdf&asdf",
	"http://190.190.1.190:8080/phpmyadmin",
	"http://www.google.com.au",
	"https://www.google.com.au/asdf/asdf/asdfasdf?asdf=asdf&asdf=asdf",
	"http://google.com.au",
	"https://google.com.au",
	"www.google.com.au",
	"google.com.au",
	"http://www.google.com.au",
	"test",
	"!@#!@#!@#",
	"123",
	"210.110",
	"y.y.y.y",
	"255.0.0.y",
	"666.10.10.20",
	"4444.11.11.11",
	"33.3333.33.3",
	"190.190.1.190",
	"190.190.1.190",
	"190.190.1.190:80",
	"190.190.1.190:8080",
	"190.190.1.190:",
	
];

inputArrs.forEach(function(input) {
	if(regExpUrl.test(input)) {
		res = "URL/IP Valid";
	} else {
		res = "Invalid URL/IP";
	}
	prevVal = document.getElementById("response").innerHTML;
    document.getElementById("response").innerHTML = prevVal + "<br/>" + input + " = " + res + "<br/>";
});

</script>

<div id="response"></div>

Answer 4

Ознакомьтесь с библиотекой регулярных выражений , которая имеет большой репозиторий регулярных выражений для всех видов проверок Они также предоставляют инструмент для онлайн-тестирования.