JS: Невозможно заключить все ссылки в тег <a>

Question

Я пытаюсь обернуть все ссылки в строке в тег <a>, используя следующий простой JS-код:

var str = 'Foo https://example1.com bar foo https://www.example2.com bar https://example3.com/url';

var str = str.replace(/(.+)?(http|https)\:\/\/(\S+)(.+)?/g, '$1<a href="$2://$3" target="_blank" rel="nofollow">$2://$3</a>$4');

console.log(str);

Но переносится только последняя ссылка

Как обернуть все ссылки?

пс. Я знаю о решении в PHP, но оно здесь не работает

Answer 1

Попробуйте использовать $& (полное совпадение)

Regex Demo

var str = 'Foo https://example1.com bar foo https://www.example2.com bar https://example3.com/url';

var str = str.replace(/\bhttps?:\/\/\S+/gi, '<a href="$&" target="_blank" rel="nofollow">$&</a>');

document.body.innerHTML = str;

Answer 2

Вот набор функций, которые я использовал для форматирования текста:

/**
 * Adds anchor elements to all the links inside a string
 * @param {string} text text to be converted
 * @returns {string} converted text 
 */
function setLinks(text) {
  var regex = /(https?:[/]{0,2}|[w]{3}[.])[^ "'>]{1,}/g;
  text = text.replace(/</g, "&lt;");
  text = text.replace(/>/g, "&gt;");
  return text.replace(regex, addLink);
}

/**
 * Surrounds string in an anchor tag
 * @param {string} link url of link
 * @returns {string} 
 */
function addLink(link) {
  var descr = String(link).replace(/^(https?:[/]{0,2})?([w]{3}[.])?/, "www.");
  if (!/^https?:[/]{2}/.test(link)) link = `http://${link}`;
  return `<a href=${link} target="_blank">${descr}</a>`;
}

document.write(setLinks('Foo https://example1.com bar foo https://www.example2.com bar https://example3.com/url'));

Answer 3

Вам не нужно захватывать все до и после URL.Replace заменяет только соответствующий раздел.

var str = 'Foo https://example1.com bar foo https://www.example2.com bar https://example3.com/url';

var str = str.replace(/(http|https)\:\/\/(\S+)/g, '<a href="$1://$2" target="_blank" rel="nofollow">$1://$2</a>');

document.write(str);

Answer 4

Вам не нужно обращаться с другими несоответствующими деталями вместо.

var str = 'Foo https://example1.com bar foo https://www.example2.com bar https://example3.com/url';

var str = str.replace(/(http|https)\:\/\/(\S+)/g, '<a href="$&" target="_blank" rel="nofollow">$&</a>');

console.log(str);