javascript - 分割字符串的最佳方法？

Question

我正在尝试解析字符串数组，例如

const example = [
'Terms and Conditions',
'5. Terms and Conditions Title (dot at the end). Some general info here.',
'5.1. Sub-section title. Some more info here.',
'6. Terms and Conditions Title ends with semi-column now: Some general info here.',
'6.1. Sub-section title. Some more info here.',
];

我想如何渲染它(React)

条款和条件

• 条款和条件标题(末尾有点)。此处有一些一般信息。
  • 5.1。小节标题。更多信息请参见此处。
• 条款和条件标题现在以半栏结尾:此处有一些一般信息。
  • 6.1。小节标题。更多信息请参见此处。

到目前为止我已经做了什么:(忽略切片 fn)

return (
<div>
  {_.slice(_.map(example, (item, index) => {
    const key = index;
    if (index === 0) { // First text
      return (<h1 key={key}>{item}</h1>);
    }
    if (item === '') {
      return (<br key={key} />);
    }
    if ((/^(\d|\d\d)\. /).test(item)) { // "5. Heading"
      const list = _.split(item, / \.|:/, 2);
      const bold = _.size(list) === 2 ? list[0] : item;
      const normal = _.size(list) === 2 ? list[1] : '';
      return [
        <span className="bold" key={`bold-${key}`}>{bold}</span>,
        <p className="normal"  key={`normal-${key}`}>{normal}</p>,
      ];
    }
    return (<p className="normal" key={key}>{item}</p>);
  }), startIndex, !_.isNil(endIndex) ? endIndex : _.size(example))}
</div>

);

但是，我需要一种更好的方法来确定是否应该分割文本(粗体文本和普通文本)，以及更好的分割方法。

问题:我的代码当前不会 _.split 以“.”结尾的文本或 ':'，而是留下一整串

'5. Terms and Conditions Title (dot at the end). Some general info here.' <- BOLD.

所以问题就在这里(lodash函数):

_.split(item, / \.|:/, 2);

Answer 1

您可以将这个扁平数组转换为嵌套数组，然后，就可以轻松迭代每个深度，并渲染正确的布局。

const example = [
  'Terms and Conditions',
  '5. Terms and Conditions Title (dot at the end). Some general info here.',
  '5.1. Sub-section title. Some more info here.',
  '5.2. Sub-section title. Some more info here.',
  '6. Terms and Conditions Title ends with semi-column now: Some general info here.',
  '6.1. Sub-section title. Some more info here.',
];

function getChildrenAtDepth(depth, nestedObj) {
  let current = nestedObj[nestedObj.length - 1].children;

  for (i = 0; i < depth - 1; i++) {
    current = current[current.length - 1].children;
  }

  return current

}

const nestedData = example.reduce((result, currentLine) => {
  const matches = currentLine.match(/^(\d+\.?)+\s/);

  if (matches) {
    const depth = matches[0].split('.').length - 1;

    const children = getChildrenAtDepth(depth, result);
    children.push({
      title: currentLine,
      children: []
    })
  } else {
    result.push({
      title: currentLine,
      children: []
    })

  }

  return result;
}, []);


var Comp = function Comp(_ref) {
  var data = _ref.data;
  var depth = _ref.depth;
  return React.createElement("ul", {
    className: 'depth-' + depth
  }, data.map(function(header) {
    return React.createElement("li", null, header.title, header.children.length > 0 && React.createElement(Comp, {
      data: header.children,
      depth: depth + 1
    }));
  }));
};

ReactDOM.render(React.createElement(Comp, {
  data: nestedData,
  depth: 0
}), document.getElementById('root'));

ul {
  padding: 0;
  margin: 1em 0;
  list-style: none;
}

ul.depth-0>li {
  font-size: 1.44rem;
  font-weight: 600;
}

ul.depth-1>li {
  font-size: 1.2rem;
}

ul.depth-2>li {
  font-size: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

此代码片段将生成

[{
  title: 'Terms and Conditions',
  children: [{
    title: '5. Terms and Conditions Title (dot at the end). Some general info here.',
    children: [{
      title: '5.1. Sub-section title. Some more info here.',
      children: []
    }, {
      title: '5.2. Sub-section title. Some more info here.',
      children: []
    }]
  }, {
    title: '6. Terms and Conditions Title ends with semi-column now: Some general info here.',
    children: [{
      title: '6.1. Sub-section title. Some more info here.',
      children: []
    }]
  }]
}]