0

我有以下两个变量作为前提：

const snippets = [
{ start: 48.12, end: 50.8, id: 12, snippetTitle: "This is the title" },
{ start: 48.29, end: 49.1, id: 13, snippetTitle: "This is the title" }
];

let words = [{"word":" yeah","start_time":"46.44","end_time":"46.82","__typename":"SimplifiedWord"},{"word":".","start_time":"46.44","end_time":"46.82","__typename":"SimplifiedWord"},{"word":" So","start_time":"47.55","end_time":"47.81","__typename":"SimplifiedWord"},{"word":" now","start_time":"47.82","end_time":"48.12","__typename":"SimplifiedWord"},{"word":" it","start_time":"48.12","end_time":"48.28","__typename":"SimplifiedWord"},{"word":" works","start_time":"48.29","end_time":"48.74","__typename":"SimplifiedWord"},{"word":" for","start_time":"48.75","end_time":"49.1","__typename":"SimplifiedWord"},{"word":" for","start_time":"49.11","end_time":"49.67","__typename":"SimplifiedWord"},{"word":" to","start_time":"49.68","end_time":"50.23","__typename":"SimplifiedWord"},{"word":" let","start_time":"50.33","end_time":"50.62","__typename":"SimplifiedWord"},{"word":" me","start_time":"50.62","end_time":"50.8","__typename":"SimplifiedWord"},{"word":" refresh","start_time":"50.8","end_time":"51.41","__typename":"SimplifiedWord"},{"word":" the","start_time":"51.42","end_time":"51.72","__typename":"SimplifiedWord"},{"word":" computer","start_time":"51.73","end_time":"52.55","__typename":"SimplifiedWord"},{"word":".","start_time":"51.73","end_time":"52.55","__typename":"SimplifiedWord"}];

我试图找到我可以通过这些数据制作的所有系列组合。基本上我想显示用户在哪里制作了一些片段start，end 但是这些片段可以重叠。我的意思是在片段变量中获取样本：在 48.12 start_time 的单词开始之前，我想开始将 48.12 和 50.8 之间的那些添加到数组中。但在此区间内，可能会出现另一个片段，例如在 48.29 和 49.1 之间，这将是片段中的片段。如何使其动态和递归地将所有这些元素包装在父元素内的数组中，但仍有可能重叠。

我试过这样的事情：

let x = words.reduce((accumulator, currentValue, idx) => {
        let isin = isInSnippets(currentValue);
        if (!isin) {
            if (cache.length > 0) {
                accumulator.push(
                    <Snippet className="wrapit" key={idx}>
                        <TextContent
                            words={cache}
                            skip
                            identity={identity}
                        ></TextContent>
                    </Snippet>
                );
                cache = [];
            }
            accumulator.push(
                <span
                    key={`${currentValue.word}${idx}`}
                    data-start={currentValue.start_time}
                    data-end={currentValue.end_time}
                    data-idnt={identity}
                >
                    {currentValue.word}
                </span>
            );
        } else cache.push(currentValue);
        return accumulator;
    }, []);

但这种方法似乎不能处理嵌套情况。它适用于单个片段，或者如果一个小片段包含在一个较大的片段中，那么只有大片段包含在 Snippet 组件中。

基本上我希望最终结果是这样的：

    <span data-start="46.44" data-end="46.82"> yeah</span>
    <span data-start="46.44" data-end="46.82">.</span>
    <span data-start="47.55" data-end="47.81"> So</span>
    <span data-start="47.82" data-end="48.12"> now</span>
    <Snippet>
    <span data-start="48.12" data-end="48.28"> it</span>
    <Snippet>
    <span data-start="48.29" data-end="48.74"> works</span>
    <span data-start="48.75" data-end="49.1"> for</span>
    </Snippet>
    <span data-start="49.11" data-end="49.67"> for</span>
    <span data-start="49.68" data-end="50.23"> to</span>
    <span data-start="50.33" data-end="50.62"> let</span>
    <span data-start="50.62" data-end="50.8"> me</span>
    </Snippet>
    <span data-start="50.8" data-end="51.41"> refresh</span>
    <span data-start="51.42" data-end="51.72"> the</span>
    <span data-start="51.73" data-end="52.55"> computer</span>
    <span data-start="51.73" data-end="52.55">.</span>
</div>

请注意最终结果中 Snippet 中的 Snippet。

4

1 回答 1

0

我不认为你真的需要recursion这里。

如果您有序列中的范围，那么下面的代码应该可以工作。

const words = [{
  "word": " yeah",
  "start_time": "46.44",
  "end_time": "46.82",
  "__typename": "SimplifiedWord"
}, {
  "word": ".",
  "start_time": "46.44",
  "end_time": "46.82",
  "__typename": "SimplifiedWord"
}, {
  "word": " So",
  "start_time": "47.55",
  "end_time": "47.81",
  "__typename": "SimplifiedWord"
}, {
  "word": " now",
  "start_time": "47.82",
  "end_time": "48.12",
  "__typename": "SimplifiedWord"
}, {
  "word": " it",
  "start_time": "48.12",
  "end_time": "48.28",
  "__typename": "SimplifiedWord"
}, {
  "word": " works",
  "start_time": "48.29",
  "end_time": "48.74",
  "__typename": "SimplifiedWord"
}, {
  "word": " for",
  "start_time": "48.75",
  "end_time": "49.1",
  "__typename": "SimplifiedWord"
}, {
  "word": " for",
  "start_time": "49.11",
  "end_time": "49.67",
  "__typename": "SimplifiedWord"
}, {
  "word": " to",
  "start_time": "49.68",
  "end_time": "50.23",
  "__typename": "SimplifiedWord"
}, {
  "word": " let",
  "start_time": "50.33",
  "end_time": "50.62",
  "__typename": "SimplifiedWord"
}, {
  "word": " me",
  "start_time": "50.62",
  "end_time": "50.8",
  "__typename": "SimplifiedWord"
}, {
  "word": " refresh",
  "start_time": "50.8",
  "end_time": "51.41",
  "__typename": "SimplifiedWord"
}, {
  "word": " the",
  "start_time": "51.42",
  "end_time": "51.72",
  "__typename": "SimplifiedWord"
}, {
  "word": " computer",
  "start_time": "51.73",
  "end_time": "52.55",
  "__typename": "SimplifiedWord"
}, {
  "word": ".",
  "start_time": "51.73",
  "end_time": "52.55",
  "__typename": "SimplifiedWord"
}];

const snippets = [{
    start: 48.12,
    end: 50.8,
    id: 12,
    snippetTitle: "This is the title"
  },
  {
    start: 48.29,
    end: 49.1,
    id: 13,
    snippetTitle: "This is the title"
  }
];

const [outerRange, innerRange] = snippets.map(item => ({
  start: item.start,
  end: item.end
}));
// console.log({outerRange, innerRange});

const output = [];
let innerSnippetSets = "";
let outerSnippetSets = "";

words.forEach(item => {
  const start = Number(item.start_time);
  const end = Number(item.end_time);
  if (start >= outerRange.start && end <= outerRange.end) {
    if (start >= innerRange.start && end <= innerRange.end) {
      innerSnippetSets += `   <span data-start="${start}" data-end="${end}">${item.word}</span>` + "\n";
    } else {
      if (innerSnippetSets) {
        outerSnippetSets += "<Sinppet>\n" + innerSnippetSets + "</Snippet>" + "\n";
        innerSnippetSets = "";
      }
      outerSnippetSets += `   <span data-start="${start}" data-end="${end}">${item.word}</span>` + "\n";;
    }
  } else {
    if (outerSnippetSets) {
      output.push("<Sinppet>\n" + outerSnippetSets + "</Snippet>");
      outerSnippetSets = "";
    }
    output.push(`<span data-start="${start}" data-end="${end}">${item.word}</span>`);
  }
});


output.forEach(item => console.log(item));

于 2020-07-30T12:34:37.660 回答