时间戳

首页 > 解决方案 > 使用 span 标签突出显示单词

javascript - 使用 span 标签突出显示单词

问题描述

我不知道下一个代码是什么，我对这段代码感到非常困惑。我创造了这个亮点，每个单词都有自己的跨度。

Lorem ipsum dolor sit amet。Et perferendis quia est dolores eligendi numquam labore et voluptatem

会变成_

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

然后将逗号(,) 替换为：

</span><span>

这是结果：

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

如果跨度包含段落标签，它将着色为绿色：

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

标签： javascript

解决方案

推荐阅读