用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);