How to parse LINKS with SPACES in TEXT?

Question

I need to parse text with links from textarea and split It by NewLines and Spaces. But there is a problem if the link to the file contains spaces in the file name.

http://example.com/file (1).jpg

Links in textarea may be in newlines:

http://ex.com/link1.jpg

http://ex.com/link2.jpg

or with 1 space

http://ex.com/link1.jpg http://ex.com/link2.jpg http://ex.com/link2.jpg

or combinations of newlines and spaces

My Code:

var linksArr = [];
var text = $("textarea[name=fileslist]").val();
if (text != undefined) {
   text = text.trim(); // remove spaces from start and end of text
   if (text != '') {
      text = text.split("\n"); // split by NEW LINE
      if (Array.isArray(text) && text.length) {
         for (var a = 0; a < text.length; a++) {
            var tLine = text[a].trim(); // trim again
            if (tLine != '') {
               tLine = tLine.replace(/\s+/g, '\n'); // replace spaces by New Line
               var listLines= tLine.split("\n"); // and splin by New Line Again
               if (Array.isArray(listLines) && listLines.length) {
                  // PROBLEM IS HERE
                  // push to array
               }
            }
         }
      }
   }
}
console.log(linksArr);

Also I try to encodeURI(text) but then there is a problem with replacing spaces between links on the same line (http://ex.com/link1.jpg http://ex.com/link2.jpg)

Can you help with optimal solution?

Answer 1

You can split by whitespaces and concat the resulting array into the array where you collect your links into:

function parse() {
    var linksArr = [];
    for (let element of document.querySelectorAll("textarea[name=fileslist]")) {
        let newArray = element.value.split(/\s/).filter(item => item);
        let newItem = "";
        for (let item of newArray) {
            if (newItem === "") {
                newItem = item;
            } else if (item.indexOf("://") < 0) {
                newItem += item;
            } else {
                linksArr.push(newItem);
                newItem = item;
            }
        }
        if (newItem) linksArr.push(newItem);
    }
    console.log(linksArr);
}

<textarea name="fileslist">http://a.b.c  http://d.e.f</textarea>
<textarea name="fileslist">http://g.h.i
http://j.k.l</textarea>
<textarea name="fileslist">http://m.n.o (1) http://p.q.r (2)</textarea>

<input type="button" value="Parse" onclick="parse()">

Explanation:

• I have provided three textareas with the specified name to have two distinct examples
• I'm looping them
• for each textarea
  • I split it by whitespaces
  • filter the result to remove empty items
  • looping the filtered array
    • if we do not have a current link yet, then we set the item to our current link
    • else if we do not have :// in our substring, then we append our current link
    • else we push the just ended link to linkArr and set our current chunk as our current link
  • when the loop completes, we push any remaining link if we did not do so already