从 JSON 生成 html 标签

Question

我打算做的是为 JSON 中的字幕文本的每个单词生成跨度。

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.']}]

我想抓取每个单词，为时间戳中的所有单词创建一个跨度，并将 append 放到一个 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>

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

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 = " ";
                }
                }

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

在此先感谢您的帮助。

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>