Highlight words starting with '@' in React

Let's assume that you have the following text:

javascript
export const text = `Hello, 

I'm @erikmartinjordan (an engineer from Barcelona).

I want to highlight the previous mention, but I don't want to
highlight emails such as jeff@bezos.com. 

Cheers,

@erikmartinjordan`;

A straightforward way to highlight the words starting with @ in React, could be:

jsx
import React    from 'react';
import { text } from Text;

const Highlight = () => {

    return(
        text.split(' ').map(el => el.startsWith('@') ? <span className = 'Highlight'>{el}</span> : el + ' ')
    );

}

export default Highlight;

The problem with this solution is that you are splitting every word. If you take a look at Google Chrome DevTools, you'll see the following HTML:

html
"Hello, "
"I'm "
<span class = 'Highlight'>@erikmartinjordan</span>
"(an "
"engineer "
...

Alternative

The alternative is to join the substrings while looping through the array.

Example:

jsx
import React    from 'react';
import { text } from Text;

const Highlight = () => {

    let res = [''];
    let arr = text.split(' ');

    arr.forEach((el, i) => {
  
        // Word starts with '@'
        // Highlight the element and append a space at the end
        if(el.startsWith('@'))
            res = [...res, <span className = 'Highlight'>{el}</span>, ' '];
        
        // Word doesn't start with '@' 
        // Don't add space if it's the last element of the array
        else
            res[res.length - 1] += (i !== arr.length - 1) ? el + ' ' : el;
    
    })

    return res;

}

export default Highlight;

And this would be the final result:

html
"Hello, 
    
I'm "
<span class = 'Highlight'>@erikmartinjordan</span>
" (an engineer from Barcelona).
    
    I want to highlight the previous mention, but I don't want to
    highlight emails such as jeff@bezos.com. 
    
    Cheers,
"
<span class="Highlight">@erikmartinjordan</span>