How replace emoji codes in html to Emoji Component?

Hello,

I want to display the Emoji Component like bellow but I don’t know how can I replace the html result with component like:

Can you help me with this please?

Thank you.

I get html like this

Hello, how are you? :thumbsup:

I would like to get something like this:

Hello, how are you? <Emoji emoji=':thumbsup:'  size={64} />

[EtienneLem]

👋

You will need a regex to detect the colons-syntax emojis, then you will be able to reconstruct your children with a mix of strings and Emoji components (given you already are in a React app)

Here’s a quick snippet of how we parse them in Missive:

let string = 'Hello, how are you? :thumbsup:'
let regex = new RegExp('(^|\\s)(\:[a-zA-Z0-9-_+]+\:(\:skin-tone-[2-6]\:)?)', 'g')

let match
while (match = colonsRegex.exec(string)) {
  let colons = match[2]
  let offset = match.index + match[1].length
  let length = colons.length

  console.log(colons, offset, length)
}

The colons variable can be used as-is w/ the Emoji component: <Emoji emoji={colons}>, it supports skin color too.

The rest (instead of the console.log) can vary depending on many factors, so I’ll let you figure out how that can be implemented in your app 😄

[Pong420]

Just tested on latest chrome and safari.

const colons = `:[a-zA-Z0-9-_+]+:`;
const skin = `:skin-tone-[2-6]:`;
const colonsRegex = new RegExp(`(${colons}${skin}|${colons})`, 'g');

interface Props {
  content: string;
}

 function Component({content}: Props) {
    return (
      <div>
        {content
          .split(colonsRegex)
          .map(
            (emoji, idx) =>
              !!emoji && (
                <Emoji
                  size={24}
                  key={idx}
                  emoji={emoji}
                  fallback={() => emoji as any}
                />
              )
          )}
      </div>
    );
  }