How to rejoin array with caught separators from .split?

Below re-joins an array of words after splitting it with /\s+/. But it only joins it with space, replacing the original separator caught in between. I want to return the original separator caught between words, like line-breaks which are also matched on the RegExp expression.

  /** wraps URLS found in message with `<span class="hyperlink"></span>`. */
  parseURLs(message) {
    if (!message) return '';

    return message
      .split(/\s+/)
      .map(word => {
        console.log('test word:', word);
        try {
          const url = new URL(word);
          return `<span class="hyperlink">${word}</span>`;
        } catch {
          return word;
        }
      })
      .join(' ');
  }

Since each word will have its own separator (as an arbitrary number of whitespaces) you can't rely on join to serialize the array of words.

But if you change your parsing strategy so that instead of using split you go straight with regular expressions, you can match your words followed by zero or * amount of whitespaces.

const matches = message.matchAll(/(\S+)(\s*)/g);  

Then you can just loop the matches found and build your own array of objects like I did here as {fullmatch, word, separator}.

In the end you can process this array as you best prefer and in the end serialize it back to string using for example reduce

*Here I also added your transform logic that will process the parsed word in .processed so that it will be used during the serialization process but yet you will have all the parsed bits conserved in a structured way.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const o = parseURLs('test3spaces   test1space testnospace https://www.google.com');
console.log(o);

function parseURLs(message) {
  if (!message) return '';

  //regex to match nonspace characters followed by spaces
  const matches = message.matchAll(/(\S+)(\s*)/g);  

  //pushes all matches in words (as objects {fullmatch, word, separator})
  const words = [...matches].map( match => {
    const [fullmatch, word, separator] = match;      
     
    const parsed = {fullmatch, word, separator};
    //**--[This is the trasform of the word as copied from your snippet]--**
    try {                  
      const url = new URL(word);
      parsed.processed = `<span class="hyperlink">${word}</span>`;
    } catch {
      parsed.processed = word;
    }
    //**--
    
    return parsed;
  });    

  //returns the serialization of words array
  return words.reduce( (serialized, word) => serialized += `${word.processed}${word.separator}`, '');
}

<!-- end snippet -->

You've thrown away the whitespace when splitting, you don't get that back.

function parseURLs(message) {
  return message && message.replace(/\S+/g, word => {
    console.log('test word:', word);
    try {
      const url = new URL(word);
      return `<span class="hyperlink">${word}</span>`;
    } catch (err) {
      return word;
    }
  });
}