Как заменить символ в строке на html tag и нарисовать все это в jsx?

Question

[Максим Корольский]

Как заменить символ в строке на html tag и нарисовать все это в jsx

Пробовал по всякому например

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

А так же комбинации этих решений

Answer 1

[Aves]

Принцип примерно такой - разбить строку на массив, заменить нужное на jsx:

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

Пример на JSBin

Comments

[Максим Корольский]

Aves та не, time просто название переменной. Это просто строка

[Aves]

Максим Корольский: как ни удивительно, new Date().toLocaleTimeString() тоже

[Максим Корольский]

Aves да уже понял, кстати не работает, проблема в : вот тут
Это возвращается как строка, если со скобками - ""^ Если без как у вас, то просто не выполняется из за ошибки !

[Aves]

Максим Корольский: jsx это не строка, а вызов функции, которая возвращает объект. Что за - ""^ остается только догадываться.

[Максим Корольский]

Ваша функция не работает, попробуйте сами, из за этой строки :
^ - опечатка

[Aves]

Максим Корольский: у меня нет никаких опечаток, добавил ссылку на рабочий пример

[Максим Корольский]

Aves это у меня опечатка, ну да ладно, спасибо вам за помощь