Заменить строку элементом JSX?

Question

Я хочу форматировать время даты, как это:

yyyy-MM-dd hh:mm:ss 

, если я вернусь строка выглядит так:

2016-07-02 20:14:12 

некоторый код, как это (все коды here):

let token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZWN]|'[^']*'|'[^']*'/g; 
mask.replace(token, (match) => { 
     if (match in flags) { 
     return flags[match]; 
     } 
     return match.slice(1, match.length - 1); 
    }); 

Проблема сейчас я хочу, чтобы число было обернуто React.Component, например:

<span>2016</span>-<span>07</span>-<span>02</span> <span>20</span>:<span>14</span>:<span>12</span> 

Я хочу отметить, что завернуты элемент не всегда span, может быть компонент, определенный по себе, такие как MyComponent

Answer 1

Вы можете попробовать что-то вроде этого:

Примечание: это обычная строковое вычисление. Вы можете проверить логику и обновление для JSX.

var str = "2016-07-02 20:14:12"; 
 
var result = str.split(" ").map(function(a){ 
 
    var delimeter = a.match(/[^0-9]/)[0]; 
 
    return a.split(delimeter).map(function(item){ 
 
    return "<span>" + item + "<span>"; 
 
    }).join(delimeter); 
 
}).join(" "); 
 

 
document.getElementById("result").innerText = result;

<span id="result"></span>

Для JSX Я думаю, вы можете попробовать что-то вроде этого:

var str = "2016-07-02 20:14:12"; 
var result = str.split(" ").map(function(a){ 
    var delimeter = a.match(/[^0-9]/)[0]; 
    return a.split(delimeter).map(function(item){ 
    return <span>{item}<span>; 
    }).join(delimeter); 
}).join(" "); 

Answer 2

После некоторых исследований я обнаружил, что существующие библиотеки не соответствует моим требованиям. Поэтому, конечно, я написал мой собственный:

https://github.com/EfogDev/react-process-string

Это очень проста в использовании. Пример вашего примера:

let result = processString({ 
    regex: /[0-9+]/gim, 
    fn: (key, match) => <span key={key}>{match[1]}</span> 
})(mask);