JavaScript Regex соответствует URL-адресу в текстовом поле

Как настроить мое регулярное выражение для проверки, содержит ли URL-адрес в блоке текста в javascript. Я не могу понять, какой шаблон использовать для этого.

 var urlpattern = new RegExp( "(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?"

 var txtfield = $('#msg').val() /*this is a textarea*/

 if ( urlpattern.test(txtfield) ){
        //do something about it
 }

EDIT:

Итак, шаблон, который я теперь использую в тестерах regex для того, что мне нужно, но chrome вызывает ошибку

  "Invalid regular expression: /(http|ftp|https)://[w-_]+(.[w-_]+)+([w-.,@?^=%&:/~+#]*[[email protected]?^=%&/~+#])?/: Range out of order in character class"

для следующего кода:

var urlexp = new RegExp( '(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?' );

Ответы

Ответ 1

Хотя экранирование символов штриховки (которое может иметь особое значение как спецификаторы диапазона символов, когда внутри класса символов) должно работать, еще один способ убрать их особый смысл - положить их в начале или в конце определения класса,

Кроме того, \+ и \@ в символьном классе действительно интерпретируются как + и @ соответственно движком JavaScript; однако экраны не нужны и могут смутить человека, который пытается визуально интерпретировать регулярное выражение.

Я бы рекомендовал следующее regex для ваших целей:

(http|ftp|https)://[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\[email protected]?^=%&/~+#-])?

это может быть указано в JavaScript либо путем передачи его в конструктор RegExp (как в вашем примере):

var urlPattern = new RegExp("(http|ftp|https)://[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\[email protected]?^=%&/~+#-])?")

или путем прямого указания литерала регулярного выражения с использованием метода цитирования //:

var urlPattern = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]*[\[email protected]?^=%&\/~+#-])?/

Конструктор RegExp необходим, если вы принимаете регулярное выражение в виде строки (например, из пользовательского ввода или вызова AJAX) и может быть более читаемым (как в этом случае). Я вполне уверен, что метод цитирования // более эффективен и в определенное время более читабельен. Оба работают.

Я протестировал ваши оригиналы и эту модификацию с помощью Chrome как на < JSFiddle > и на < RegexLib.com > , используя механизм регулярного выражения на стороне клиента (браузер) и, в частности, выбор JavaScript. В то время как первый из них не соответствует заявленной ошибке, моя предложенная модификация преуспевает. Если я удалю h из http в источнике, он не будет соответствовать, как и должно быть!

Изменить

Как отмечено @noa в комментариях, приведенное выше выражение не будет соответствовать локальным сетевым (не интернет-серверам) или любым другим серверам, доступным с одним словом (например, http://localhost/... или https://sharepoint-test-server/...). Если требуется сопоставление этого типа URL (что может быть или не может быть), может быть более подходящим следующее:

(http|ftp|https)://[\w-]+(\.[\w-]+)*([\w.,@?^=%&amp;:/~+#-]*[\[email protected]?^=%&amp;/~+#-])?

#------changed----here-------------^

< Редактировать конец

Наконец, отличный ресурс, который научил меня 90% того, что я знаю о regex, Regular-Expressions.info - я очень рекомендую его, если вы хотите изучить регулярное выражение (как то, что он может сделать, так и то, что он не может)!

Ответ 2

Здесь наиболее полный синтаксический анализ URL-адреса.

Он работает с ЛЮБОЙ URI/URL в ЛЮБОЙ подстроке!

https://regex101.com/r/jO8bC4/5

Пример JS-кода с выходом - каждый URL-адрес превращается в массив из 5 частей его "частей":

var re = /([a-z]+\:\/+)([^\/\s]*)([a-z0-9\[email protected]\^=%&;\/~\+]*)[\?]?([^ \#]*)#?([^ \#]*)/ig; 
var str = 'Bob: Hey there, have you checked https://www.facebook.com ?\n(ignore) https://github.com/justsml?tab=activity#top (ignore this too)';
var m;

while ((m = re.exec(str)) !== null) {
    if (m.index === re.lastIndex) {
        re.lastIndex++;
    }
    console.log(m);
}

Вы получите следующее:

["https://www.facebook.com",
  "https://",
  "www.facebook.com",
  "",
  "",
  ""
]

["https://github.com/justsml?tab=activity#top",
  "https://",
  "github.com",
  "/justsml",
  "tab=activity",
  "top"
]

BAM! RegEx FTW!

Ответ 3

При использовании new RegExp вам нужно избежать обратного слэша.

Также вы можете поместить тире - в конце символьного класса, чтобы избежать его экранирования.

&amp; внутри символьного класса означает & or a or m or p or ;, вам просто нужно поместить & и ;, a, m and p уже соответствовать \w.

Итак, ваше регулярное выражение становится:

var urlexp = new RegExp( '(http|ftp|https)://[\\w-]+(\\.[\\w-]+)+([\\w-.,@?^=%&:/~+#-]*[\\[email protected]?^=%&;/~+#-])?' );

Ответ 4

попробуйте (http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?

Ответ 5

Я очистил ваше регулярное выражение:

var urlexp = new RegExp('(http|ftp|https)://[a-z0-9\-_]+(\.[a-z0-9\-_]+)+([a-z0-9\-\.,@\?^=%&;:/~\+#]*[a-z0-9\[email protected]\?^=%&;/~\+#])?', 'i');

Протестировано и отлично работает;)

Ответ 6

Попробуйте это общее регулярное выражение для большого формата URL

/(([A-Za-z]{3,9})://)?([-;:&=\+\$,\w][email protected]{1})?(([-A-Za-z0-9]+\.)+[A-Za-z]{2,3})(:\d+)?((/[-\+~%/\.\w]+)?/?([&?][-\+=&;%@\.\w]+)?(#[\w]+)?)?/g

Ответ 7

Проблема заключается в том, что "-" в классе символов (скобки) анализируется как диапазон: [a-z] означает "любой символ между a и z". Как предложил Vini-T, вам нужно избежать символов "-" в классах символов, используя обратную косую черту.

Ответ 8

попробуйте, это сработало для меня

/^((ftp|http[s]?):\/\/)?(www\.)([a-z0-9]+)\.[a-z]{2,5}(\.[a-z]{2})?$/

что так просто и понятно