Javascript 显示突出显示的文本

我是Javascript新手。我一直在尝试在web界面上添加突出显示功能，但很难让它正常工作。下面的代码是我到目前为止得到的，它允许用户选择文本->然后弹出按钮选择所选文本属于哪个类->所选文本高亮显示。但是，这些突出显示的文本没有正确保存，因此，当单击“显示突出显示”按钮时（如屏幕截图中所示），它们没有正确显示

在这个例子中，我想看到

第1类：大律师康斯坦斯·布里斯科

第二类：警察

单击“显示高光”时。最终，这些突出显示的文本及其类将被保存为dict，以备将来使用（对不起，我只熟悉Python）

截图#1： 截图#2：

require（['jquery-noconflict']，函数（jquery）{
var$=jQuery | | window.jQuery；
变量选择；
document.addEventListener（“selectionchange”，function（））{
lastSelection=window.getSelection（）
});
var showBtn=document.getElementById（'show_highlights_btn'）；
var highlights=document.createElement（“highlights”）
函数getRightClick（e）{返回rightclick；//true或false
}
函数getSelectionText（）{返回文本；
}
$（'.main_area'）.mousedown（函数（事件）{
$（'body'）.attr（'mouse-top'，event.clientY+window.pageYOffset）；
$（'body'）.attr（'mouse-left'，event.clientX）；
如果（！getRightClick（事件））{
$（'.entity_types'）.hide（）；
document.getSelection（）.removeAllRanges（）；
}
});
$（'.main_area'）.mouseup（函数（事件）{
if（lastSelection.toString（）.length>1&&！getRightClick（事件））{
$（'.entity_types'）.css({
显示：“块”，
位置：'绝对'，
顶部：event.clientY+15，
左：event.clientX+10
});
$（'.entity_types button'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var selectedText=getSelectionText（）；
var category=$（this.text（）；
var txt=document.createTextNode（类别+“：”+selectedText）；
hights.appendChild（txt）；
});
}
});
showBtn.addEventListener（'click'，函数（）{
//
var selected_highlights=document.getElementById（“selected_highlights”）；
选定的_高光。追加子项（高光）；
});
});

更新：我已经设法让“显示亮点”正常工作，但不知怎的，最近的亮点显示了两次

  showBtn.addEventListener('click', function () {
    console.log("display buttons");
    var selected_highlights = document.getElementById("selected_highlights");

    /** first remove current text **/
    while (selected_highlights.hasChildNodes()) {
      selected_highlights.removeChild(selected_highlights.lastChild);
    }

    for (i = 0; i < highlights.innerHTML.length; i++) {
      console.log('display highlight');
      selected_highlights.appendChild(highlights.childNodes[i]);
      selected_highlights.appendChild(br());
    }

showBtn.addEventListener（'click'，函数（）{
控制台日志（“显示按钮”）；
var selected_highlights=document.getElementById（“selected_highlights”）；
/**首先删除当前文本**/
while（选中的_高亮显示.hasChildNodes（））{
选中的\u highlights.removeChild（选中的\u highlights.lastChild）；
}
对于（i=0；i

看看这是否对你有帮助，几天前我给一个朋友做了一把小提琴

可能不是您的确切用例，但逻辑可能会帮助您

函数highlightSearch（）{
var text=[“JavaScript”、“is”、“or”]；
var sampleText=document.getElementById（'searchtext'）.innerHTML；
//警报（样本文本）；
对于（var i=0；i首先，这是如何突出显示HTML中的文本


突出显示的文本
我迷路了我不明白你的意思基本上我想保存所有突出显示的文本并在“显示突出显示”时显示所有文本按钮被点击。但正如您从第二个屏幕截图中看到的，它们没有正确显示。这是您一直在寻找的吗？非常感谢Kento。这不是我真正想要的。正如您从我的代码中看到的，我已经有了突出显示的文本
var selectedText
，以及相应的
var category
我想用showBtn.addEventListener（'click'，function（）{}）

来显示它们，这需要保存一个dict列表（我在这里使用的是Python语言）或其他在JS中很好的数据结构。。

  showBtn.addEventListener('click', function () {
    console.log("display buttons");
    var selected_highlights = document.getElementById("selected_highlights");

    /** first remove current text **/
    while (selected_highlights.hasChildNodes()) {
      selected_highlights.removeChild(selected_highlights.lastChild);
    }

    for (i = 0; i < highlights.innerHTML.length; i++) {
      console.log('display highlight');
      selected_highlights.appendChild(highlights.childNodes[i]);
      selected_highlights.appendChild(br());
    }