开发NER数据标注工具：点击动态按钮无法获取选中文本求助

我完全懂你现在卡在哪了——当你选中段落里的NER文本后，点击动态生成的高亮按钮，之前的文本选区直接丢了，导致getSelectedText()拿不到有效范围。这其实是浏览器的默认行为：点击按钮时，页面焦点会转移到按钮上，浏览器会自动清除之前的文本选区，所以你在按钮点击事件里再去获取选区，自然是空的。

核心思路：提前保存选区状态 #

解决办法很简单：在用户选中文本的瞬间（比如mouseup事件触发时），把选区保存到一个全局变量里，这样哪怕后续点击按钮选区丢失，我们也有备份可以用。

修改后的完整代码 #

// 全局变量：保存用户选中的文本范围
let savedSelection = null;

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(){
  // 监听段落的mouseup事件，实时保存选区
  $("p.raw_text").on("mouseup", function(e) {
    e.preventDefault();
    savedSelection = getSelectedText();
  });

  // 动态按钮点击事件：直接用提前保存的选区
  $(document).on('click', '[id^=highlight]', function(e) {
    e.preventDefault();
    
    if (!savedSelection) {
      alert("请先选中文本再点击高亮按钮哦！");
      return;
    }

    // 这里可以验证选区内容
    alert("选中的文本：" + savedSelection.toString());

    // 示例高亮逻辑：用对应颜色包裹选中文本
    // 假设你的按钮有data-color属性存储对应颜色，比如<button id="highlight-tag1" data-color="lightgreen">Tag1</button>
    const highlightColor = $(this).data('color');
    const highlightSpan = document.createElement('span');
    highlightSpan.style.backgroundColor = highlightColor;
    highlightSpan.style.padding = "2px 4px";
    highlightSpan.style.borderRadius = "3px";

    // 用span包裹选区内容实现高亮
    savedSelection.surroundContents(highlightSpan);

    // 可选：高亮后清空选区，避免重复高亮同一文本
    savedSelection = null;
  });
}

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

关键细节说明 #

1. 全局变量savedSelection：专门用来存储用户选中文本时的Range对象，相当于给选区做了个“快照”，点击按钮时直接调用这个快照就行。
2. 按钮的data-color属性：建议给每个动态按钮加上这个属性（比如data-color="blue"），这样高亮时可以直接获取对应标签的颜色，不用在代码里硬写。
3. 选区清空逻辑：高亮完成后清空savedSelection，可以防止用户误点击按钮重复高亮同一文本，也符合标注工具的使用逻辑。

额外优化建议 #

• 如果用户点击页面空白处，可以监听click事件清空savedSelection，避免残留无效选区。
• 可以给已高亮的文本加个标识（比如自定义class），防止重复标注同一文本段。

内容的提问来源于stack exchange，提问作者trex