Как найти все ссылки в тексте?

Question

Решил попрактиковаться в js и jquery на досуге, но на самом главном застопорился. Пишу скрипт который будет выводить все ссылки из текста. Как я понял нужно использовать регулярные выражения, но у меня не получилось.

<div class="input-wrap">
    <textarea name="input-text" id="input-text" cols="30" rows="10"></textarea>
    <button id="submit-btn">Find</button>
</div>
<label for="output-text">Finded URLs</label>
<textarea name="output-text" id="output-text" cols="30" rows="10" disabled></textarea>

<script>
$('#submit-btn').click(function(){
    text = $('#input-text').val() // Получение текста
    output = ?
    $("#output-text").val(output) // Вывод
});
</script>

Как мне находить их и записывать в переменную?

Answer 1

Как вариант: сначала разделите text по пробелам получив массив "слов". Далее приходитесь по массиву циклом, и если "слово" начинается на "http" - значит это ссылка, складывайте ее в другой массив. Так вы получите массив с ссылками. Не знаю javascript, но на C# код следующий:

List<string> links = new List<string>();
string[] ms = text.Split(' ');

for(int i = 0; i < ms.Lenght; i++)
{
    if(ms[i].StartSwith("http")) 
        links.add(ms[i]);
}

Answer 2

/https?:\/\/\S+/g

? — 0 или 1 совпадение, т.е. необязательный символ s
Символ / является как-бы "кавычкой" для регулярного выражения. Его нужно экранировать, чтобы выражение не заканчивалось на нем.
\S — Любой символ кроме пробельного, + один или много раз подряд.
Флажок g - global, чтобы не останавливался на первом совпадении.

* Переменные обязательно нужно объявлять через let/const (или var, для старых браузеров). Даже если обнаружили, что работает и без них). Помимо того, что они просто не будут работать в режиме "use strict", еще и умеют приводить к интересным бесконечным циклам или другим непредсказуемым ошибкам.

$('#submit-btn').click(function() {
  let str = $('#input-text').val();
  let output = str.match(/https?:\/\/\S+/g);
  
  $("#output-text").val( output.join("\n") );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="submit-btn">Find</button>
<hr>
<textarea id="input-text" cols="30" rows="10">
http://test.ru?x=https://moo
https://ru.come.com
jsfiddle.net
</textarea>
<textarea id="output-text" cols="30" rows="10" disabled></textarea>

Regex Cheat Sheet
https://regex101.com/

Answer 3

Вариант без регулярных выражений. Весь парсинг и поиск средствами только JQuery. Здесь за ссылки мы считаем тег А c атрибутом href, а ежели нужно и что-то другое, то поиск легко дополнить. Вставляйте полный HTML в поле для поиска:

  $('#submit-btn').on('click', function() {
    var result = '';
    $('<document></document>')
      .html($.parseHTML($('#input-text').val()))
      .find('a[href]')
      .each(function() {
        result += this.href + '\r\n';
      });
    $("#output-text").val(result);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="input-wrap">
  <div>
    <label for="input-text">Copy/Past HTML here:</label><br>
    <textarea name="input-text" id="input-text" cols="50" rows="10">&lt;a href="https://www.youtube.com/watch?v=BxIgIi_bySg"&gt;Саша Грей готовит пельмени&lt;/a&gt;</textarea>
  </div>
  <div><button id="submit-btn">Search</button></div>
  <div>
    <label for="output-text">Search results:</label><br>
    <textarea name="output-text" id="output-text" cols="50" rows="10" disabled></textarea>
  </div>
</div>

БЛОГ НА HUSL

Как найти все ссылки в тексте?

Ответы (3 шт):