How to replace character in string with html tag and draw it all in jsx?

Question

JavaScript

How to replace a character in a string with an html tag and draw it all in jsx
Tried everything for example

{time.replace(String.fromCharCode(183), "<span className='dot'>·</span>")}\
{time.replace(/·/g, <span className='dot'>·</span>)}
{time.replace(/&middot;/g, \<span className='dot'\>·\<\/span\>)}

As well as combinations of these solutions

Answer 1

The principle is something like this - split the string into an array, replace the desired one with jsx:

{
  new Date()
    .toLocaleTimeString()
    .match(/[^:]+|:/g)
    .map((e, i) => e == ':' ? <span key={i}>:</span> : e)
}

Example on JSBin