Javascript 使用span标记突出显示单词

我不知道下一个代码是什么，我对这个代码很困惑。 我创建了一个突出显示，每个单词都有自己的跨度

Lorem ipsum dolor sit amet。这是一种新的劳动和生活方式

将变成

Lorem，ipsum，dolor，sit，amet.，Et perferendis，quia，est，dolores，eligendi，numquam，labore，Et，voluptatem

然后将逗号（，）替换为：

这就是结果：

Lorem</span><span>ipsum</span><span>dolor</span><span>sit</span><span>amet.</span><span>Et</span> ...

Loremipsumdolorsitamet.Et。。。

如果跨度包含段落标记，则其颜色将变为绿色：

段落

下一步是什么？

//highlight the whole editor
var editor = document.querySelector("#rescript-editor");
function highlight_package() {
    const highlight_split = editor.value.split(" ");
    const highlight_span = highlight_split.toString().replace(/,/gi, "</span><span>");
    var highlight_count = 0;
    try {
        highlight_count++
        setInterval(function(){
            var highlight_detect = document.getElementsByTagName("span")[highlight_count];
            highlight_coloring();
            // WHAT'S NEXT??
        }, 100);
    } catch(e) {
        
    }
}
function highlight_coloring() {
    if( highlight_detect.value == "<p>" || highlight_detect.value == "</p>" ) {
        highlight_detect.style.color = "green";
    }
}

//突出显示整个编辑器
var editor=document.querySelector（“重新编写编辑器”）；
函数突出显示_包（）{
const highlight_split=editor.value.split（“”）；
const highlight_span=highlight_split.toString（）.replace（/，/gi，“”）；
var\u计数=0；
试一试{
高光计数++
setInterval（函数（）{
var highlight_detect=document.getElementsByTagName（“span”）[highlight_count]；
突出显示_着色（）；
//下一步是什么？？
}, 100);
}捕获（e）{
}
}
函数highlight_coloring（）{
如果（突出显示_detect.value==“”||突出显示_detect.value==“
”）{
突出显示_detect.style.color=“绿色”；
}
}

添加标签后如何添加段落？正确定义输入输出。

<span style="color: green"><p>paragraph</p></span>

//highlight the whole editor
var editor = document.querySelector("#rescript-editor");
function highlight_package() {
    const highlight_split = editor.value.split(" ");
    const highlight_span = highlight_split.toString().replace(/,/gi, "</span><span>");
    var highlight_count = 0;
    try {
        highlight_count++
        setInterval(function(){
            var highlight_detect = document.getElementsByTagName("span")[highlight_count];
            highlight_coloring();
            // WHAT'S NEXT??
        }, 100);
    } catch(e) {
        
    }
}
function highlight_coloring() {
    if( highlight_detect.value == "<p>" || highlight_detect.value == "</p>" ) {
        highlight_detect.style.color = "green";
    }
}