creating an array from dynamic string with specific elements

Question

I have a string "hello @steph the email you requested is test@test.com for user @test"

I want to turn this into:

['hello ', <a href="">@steph</a>, 'the email you requested is test@test.com for user ', <a href="">@test</a>];

here is what i have:

function matchUserMention(text) {
    var pattern = /\B@[a-z0-9_-]+/gi;
    return text.match(pattern); // [@steph, @test]
}

function applyUser(string) {
    let text = string;
    if (typeof text != 'string') return text;
    var arr = [];

    function replaceAll(str, find, replace) {
        return text.replace(new RegExp(find, 'g'), replace);
    }
    const matches = matchUserMention(text);
    _.each(matches, (match) => {
        text = replaceAll(text, match, <a href={'https://test.co'}>${match}</a>);
    });
    return text; 
}

text right now returns:

'hello <a href="">@steph</a>, the email you requested is test@test.com for user <a href="">@test</a>

Does anyone know the best way of creating the array from here? It cant be to heavey as I need this to be called all the time

Answer 1

You could use split with a regular expression that has a capture group. This will result in an array that has the matching elements at the odd indexes. You can then apply the <a> wrap to those via .map(). Finally, you can use .filter() to remove the empty strings (e.g. at the start or end of the array):

// Sample data
var url = 'https://elk.co';
var string = "hello @steph the email you requested is test@test.com for user @test";

// The transformation
var parts = string.split(/(\B@[\w-]+)/g)
                  .map( (w,i) => i%2 ? `<a href='${url}'>${w}</a>` : w )
                  .filter(Boolean);

// Output the result
console.log(parts);

Answer 2

function applyUser(string) {
  const reg = /\B@[a-z0-9_-]+/ig;
  const res = [];
  let match;

  // loop while we can match something
  while((match = reg.exec(string)) !== null) {
    // push to result array portion of string before user match, if any
    if (match.index > 0) {
      res.push(string.substring(0, match.index));
    }

    // push updated user name to result array
    res.push('<a href="">' + match[0] + '</a>');

    // remove processed part from a string
    string = string.substr(match.index + match[0].length);
  }

  // push any reminder to the result array
  if (string) {
    res.push(string);
  }
  return res;
}

Answer 3

This approach matches the usernames and uses the RegExp capability of remembering the last match postion. So subsequent exec() call will match subsequent usernames. The match object returned by exec() is an array containing the matched texts and an index attribute pointing to the match position.

The code copies the text from the last position (initially position 0) to the matched username, then appends the "wrapped" username and starts over until there are no more username matches.

The code is commented line by line, describing its function:

function wrapUsernames(str) {
        // match "usernames" ("at" followed by text, preceeded by non-word character or line-start), 
        // the RegExp keeps its state
    var re = /(?:([^\w]|^)(@[a-z]+))/g,
        // store a RegExp match object
        match,
        // store the text fragments
        results = [],
        // remember last index for substring copy
        lastIndex = 0;

    // match and store result, returns null if it does no longer match
    while (match = re.exec(str)) {
        // copy text from last match / start to username 
        // (only if not matched at index 0 to prevent empty string)
        if (match.index != 0) {
            results.push( str.substring(lastIndex, match.index) );
        }
        if (match[1].length >= 1) {
            // it also matched the char before the username, append it
            results.push(match[1]);
        }
        // copy matched username and wrap in a tag
        results.push('<a href="...">' + match[2] + '</a>');
        // update the index to start copy at the next position
        lastIndex = match.index + match[0].length;
    }

    // append the remaining string (only if it wouldn't be an empty string)
    if (lastIndex < str.length) {
        results.push(str.substring(lastIndex));
    }

    return results;
}

This should also match usernames prefixed with other characters than space:

> wrapUsernames("(@steph) the email you requested is test@test.com for user (@test)")
< Array [ "(", "<a href="...">@steph</a>", ") the email you requested is test@test.com for user ", "(", "<a href="...">@test</a>", ")" ]
> wrapUsernames("@steph the email you requested is test@test.com for user (@test)")
< Array [ "<a href="...">@steph</a>", " the email you requested is test@test.com for user ", "(", "<a href="...">@test</a>", ")" ]
> wrapUsernames("hi, @steph the email you requested is test@test.com for user @test")
< Array [ "hi,", " ", "<a href="...">@steph</a>", " the email you requested is test@test.com for user ", " ", "<a href="...">@test</a>" ]

Answer 4

Thanks everyone, this ended up being what i used in case anyone else happens across this. It is a bit of a mix of the other responses.

 function applyUser(str) {
        var arr = [],
            userRegEx = /\B@[a-z0-9_-]+/gi,
            execResult,
            lastFoundLen = 0,
            found,
            strLen = str.length,
            index = 0;
        while ((execResult = userRegEx.exec(str)) !== null) {
            const newIndex = execResult.index;
            if (newIndex > index + lastFoundLen) arr.push(str.substring(index + lastFoundLen, newIndex));
            found = execResult[0];
            if (!found) break;
            const foundLen = found.length;
            const userId = execResult[0].substring(1);
            arr.push(
                <ProfilePersona
                    key={userId}
                    noAvatar
                    view="compact"
                    userId={userId}>
                    {userId}
                </ProfilePersona>
            );

            index = newIndex;
            lastFoundLen = foundLen;
        }
        if (index + lastFoundLen < strLen) arr.push(str.substr(index + lastFoundLen));
        if (!arr.length) arr.push(str);
        return arr;
    }