javascript - 用 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(" ");