从JSON生成html标记

Question

我打算为JSON中的字幕文本的每个单词生成span。

我拥有的JSON：

var sub_info = [
{'start': 3.92, 'end': 6.84, 
'words': ['So', 'assessing', 'the', 'situation.', 'Are', 
'they', 'breathing?']}
{'start': 7.5, 'end': 10.82, 
'words': ['No,', 'Rose,', 'they', 'are', 'not', 
'breathing.']}]

我想抓取每个单词，为时间戳内的所有单词做一个跨度，并将它们附加到div中

结果应该是这样的：

<div id='subs'>
<span class='popoverOption' title='So' type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="something">
So
</span>
<span class='popoverOption' title='assessing' type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content=" something" >
assessing
</span>
<span class='popoverOption' title='the' type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="something" >
the
</span>
<span class='popoverOption' title='situation' type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="something" >
situation
</span>
</div>

我已经写了一个将字幕与视频同步的函数，但我给了它整个文本而不是拆分单词：

videoPlayer.addEventListener("timeupdate", myFunc);

function myFunc() {
const activeSubtitle = sub_info.find(
(sub) =>
parseFloat(sub.start) <= videoPlayer.currentTime &&
parseFloat(sub.end) >= videoPlayer.currentTime
);
if (activeSubtitle) {
subtitles.innerHTML = activeSubtitle.text;
} else {
subtitles.innerHTML = " ";
}
}

但是，我如何在每个单词的每个时间戳中生成具有特定类和其他属性的动态跨度呢？

提前感谢您的帮助。

Answer 1

var sub_info = [{
'start': 3.92,
'end': 6.84,
'words': ['So', 'assessing', 'the', 'situation.', 'Are',
'they', 'breathing?'
]
},
{
'start': 7.5,
'end': 10.82,
'words': ['No,', 'Rose,', 'they', 'are', 'not',
'breathing.'
]
}
]
sub_info.forEach(obj => {
obj.words.forEach(word => {
let tag = '<span class="popoverOption" title="' + word + '" type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content=" something" >' + word + '</span>';
document.querySelector('#output').innerHTML += tag;
})
})

.popoverOption {
display: block;
border: 1px solid #ccc;
padding: 5px;
}

<div id='output'></div>