How to fetch urls in array from paragraphs in javascript

Question

I want to fetch all urls available in paragraph or sentence in javascript in array. For example check paragraph below:

Please checkout http://stackoverflow.com. It has very cool logo https://d13yacurqjgara.cloudfront.net/users/1249/screenshots/2247671/stackoverflow.png.

From above string, We have to get array of these two url.

Solution 1: Solution 1, I know is to split paragraph with space, iterate over array and check for url one by one and push into url's array. But, It's a time taking solution.

Are there better solution for finding it or above solution is fastest and good to go?

Thank you.

Check tihs one http://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-a-url — Vineet, Jan 13 '17 at 11:16
Thanks Vineet for solution, But my paragraph may contains thousands of words. I want to fetch all urls from that paragraph not checking that string is url or not. — AnkitJ, Jan 13 '17 at 11:19

score 1 · Answer 1 · answered Jan 13 '17 at 11:46

Is this what you are looking for?

var list = [];
var sentence = "Please checkout http://stackoverflow.com. It has very cool logo https://d13yacurqjgara.cloudfront.net/users/1249/screenshots/2247671/stackoverflow.png.";

var result = checkForURL(sentence);

function checkForURL(text) {
    var urlRegex = /(https?:\/\/[^\s]+)/g;
    return text.replace(urlRegex, function (url) {
        return '<a>' + url + '</a>';
    })
}
var number = result.split('<a>');

for (var i = 1; i < number.length; i++) {
        list.push(number[i].split(".</a>")[0]);             
}
alert(list);

score 1 · Answer 2 · answered Jan 13 '17 at 12:20

You might want to split on :// to get a smaller array to iterate over.

Example:

Demo JSFiddle

HTML

<p id='p'>
Please checkout http://stackoverflow.com. It has very cool logo https://d13yacurqjgara.cloudfront.net/users/1249/screenshots/2247671/stackoverflow.png.
</p>
<h4>
URLs
</h4>
<ol id='results'>

</ol>

Javascript

findUrls();

function findUrls(){
  var p = document.getElementById('p');
  var res = document.getElementById('results');
  var pStr = p.innerText;
  var parts = pStr.split(/:\/\//);
  if (parts.length < 2) 
    return;
  for (var i = 1 ; i < parts.length ; i++){ 
    var part = parts[i];
    var lastPart = parts[i-1];
    if (lastPart.length < 4 )
      continue;
    if (lastPart.length >= 4 && lastPart.substr(-4) == 'http')
      part = 'http://' + part;
    else if (lastPart.length >= 5 && lastPart.substr(-5) == 'https')
      part = 'https://' + part;    
    var firstSpace = part.indexOf(' ');
    if (firstSpace > -1)
      part = part.substring(0, firstSpace);
    var lastChar = part.charAt(part.length - 1);
    if (lastChar == ',' || lastChar == '.' /* || ... */)
      part = part.substring(0,part.length - 1);
    res.innerHTML += '<li>' + part + '</li>'; // or push part to some result array  
  }
}

score 0 · Accepted Answer · answered Jan 13 '17 at 11:40

Try this approach. It might need some fine tuning..

var paragraphs = document.getElementsByTagName('p')
var regex = /(https?:\/\/.*?)(\s|$)/g;
var urls = [];
var badLastChars = [".", ","];

for (var i = 0; i < paragraphs.length; i++) {
  var p = paragraphs[i].innerText;
  var match;
  while (match = regex.exec(p)) {
    var url = match[1];
    var lastChar = url[url.length-1];
    if (badLastChars.indexOf(lastChar) > -1 ) {
      url = url.slice(0,url.length-1);
    }
    console.log(url);
    urls.push(url);
  }
}

<p> Please checkout http://stackoverflow.com. It has very cool logo https://d13yacurqjgara.cloudfront.net/users/1249/screenshots/2247671/stackoverflow.png.</p>

<p> Another  paragraph https://stackexchange.com. and here is another url I am making up: https://mycoolurlexample.com/this/is/an/example</p>

How to fetch urls in array from paragraphs in javascript

3 Answers3