为每个标签突出显示具有不同颜色的选定文本答案

【问题标题】：Highlight Selected text with different color for each tag为每个标签突出显示具有不同颜色的选定文本
【发布时间】：2020-11-20 07:59:32
【问题描述】：

当我想在单击动态按钮时选择文本时，文本选择和突出显示不起作用，但是当我直接从段落（mouseup）本身中选择文本时它起作用。（完整代码见JSFiddle）

我为每个标签生成了各种颜色的动态按钮，例如。 Tag1-绿色，Tag2-蓝色，Tag3-红色，...等

所以当用户点击时：

Tag1 按钮，段落中选定的文本应以green 颜色突出显示
Tag2 按钮，段落中选定的文本应以blue 颜色突出显示

Tag3 按钮，段落中选定的文本应以red 颜色突出显示 ...等

var getSelectedText = function() {
var selectedRange ="";
try {
    if (window.getSelection) {
        selectedRange = window.getSelection().getRangeAt(0);
    } else {
        selectedRange = document.getSelection().getRangeAt(0);
    }
} catch (err) {
    console.log(err)
}
return selectedRange
};

 function highlight(){
   //Below Commented code works fine
  // $("p.raw_text").on("mouseup", function(e) {
  //   e.preventDefault()
  //   var selection = getSelectedText(); 
  //    alert("Selection: " + selection);
  // }); 

 //But this code does not work as buttons with id that starts with highlight are dynamically generated
  $(document).on('click', '[id^=highlight]', function(e) {
    e.preventDefault()
    var selection = getSelectedText(); 
     alert("Selection: " + selection);
  }); 
 }

 $(function(){
   highlight();  
 });

P.S文本的突出显示尚未实现，因为我没有让选定的文本突出显示它..

编辑

注意 - 我正在尝试构建一个数据注释工具来注释我的机器学习训练数据。它的作用是，它允许用户选择要注释的NER 文本并用特定的标签（或标记）标记它。前任。选定的文本可以是段落中的人名，然后用户应该单击标签（人）并用某种颜色突出显示段落中的选定文本，类似地，段落中可以有任意数量的标签（标签），例如组织、城市、国家等用户应该能够用特定颜色突出显示每个 NER。（此外，我将传递结果数据及其突出显示的索引以构建机器学习模型。）

【问题讨论】：

我已经阅读了您查看示例的问题，但我仍然不明白您要做什么。也许您可以根据您目前的示例给出您想要的行为示例。
@DavidTran - 请看一下，修改了问题。感谢您的回复！

标签： javascript html jquery text highlight

【解决方案1】：

当我在段落点击中移动按钮点击时，下面的代码非常适合我。

function highlight(){
 $(document).on('click', 'p.raw_text', function(e) {
      e.stopPropagation()
      var selectedRange = getSelectedText()
        $(document).off('click', '[id^=highlight]')
        $(document).on('click', '[id^=highlight]', function(ev) {
          var text = selectedRange.toString();
          if(!text)return;
            console.log(selectedRange.toString())
            hiliter(text, e.target, $(ev.target).data())
        });
    }); 
}

function hiliter(word, element, data) {
  console.log("data", data.color)
  var rgxp = new RegExp(word, 'g');

  var repl = '<span style="background-color:'+ data.color +';">' + word + '</span>';
  element.innerHTML = element.innerHTML.replace(rgxp, repl);
}

P.S- 由于我对jquery 知之甚少，我不确定我是否做得对。请验证某人。谢谢

【讨论】：