用 JSX 元素替换字符串？

Question

我想像这样格式化日期时间：

yyyy-MM-dd hh:mm:ss

如果我return一个字符串是这样的：

2016-07-02 20:14:12

有些代码是这样的（所有代码都是here）：

let token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])?|[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);

用 JSX 元素替换字符串？

Replace string with JSX element?

javascript

jsx

typescript

reactjs