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

Question

当我想在单击动态按钮时选择文本时，文本选择和突出显示不起作用，但当我直接从段落 (on 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();  
   });
  

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

编辑

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

标签： javascripthtmljquerytexthighlight

Answer 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);
}

PS - 以我对 的了解很少jquery，我不确定我是否以正确的方式做事。请验证某人。谢谢