React text splitting with html generation

Question

My input is

const text = 'Hello @kevin12 How are you?'

How I render it

<span>{text}</span>

How I want to render it

<span>Hello <em>@kevin12</em> How are you?</span>

My parsing function (incomplete)

const parseText = value => {
  const mention = value.substring(value.lastIndexOf('@')+1)
  const words = value.split(mention)
  return words.map(word => word === mention ? React.createElement('em', {}, word) : word)
}

...

<span>{parseText(text)}</span>

Please help me complete this rendering function.

ecoplaneteer · Accepted Answer · 2021-01-15 13:53:27Z

2

const parseText = value => {
    const words = value.split(' ')
    return words.map((word, index) => {
      if (index !== words.length - 1) {
        word += " "
      }
      return word[0] === '@' ? <em>{word}</em> : word;
    })
}

answered Jan 15, 2021 at 13:53

ecoplaneteer

1,9841 gold badge12 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lissettdm · Accepted Answer · 2021-01-15 13:56:24Z

1

Split by words, iterate over the array and find the item that start with @

export default function App() {
  const text = "Hello @kevin12 How are you?";
  const parseText = value => {
    const mention = value.split(" ");
    return mention.map(w => (w[0] === "@" ? <em> {w} </em> : <> {w}</>));
  };
  return (
    <span>
      <span>{parseText(text)}</span>
    </span>
  );
}

answered Jan 15, 2021 at 13:56

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

Comments

Sam · Accepted Answer · 2021-01-15 14:12:07Z

0

I will suggest going through the regex, here is the sample code

    const text = 'Hello @kevin12 How are you?';
    let finalResult = test;
    let re =/(?:^|\W)@(\w+)(?!\w)/g;
    let match,matches =[];
   while(match =re.exec(test)){
     let found ='@'+match[1];
     let replace ='<em>'+found+'</em>';
     finalresult =finalResult.replace(found,replace);
   }
 console.log(finalResult) ;

answered Jan 15, 2021 at 14:12

Sam

1,2591 gold badge8 silver badges14 bronze badges

Collectives™ on Stack Overflow

React text splitting with html generation

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related