如何使用jQuery为textarea内的单个文本元素绑定select选择事件

首先明确：原生textarea是纯文本输入控件，仅支持针对整个输入框的事件绑定，无法直接为内部的某段文本单独绑定选择事件，需要通过文本范围匹配的方式间接实现，具体实现思路如下：

• 绑定textarea的select事件，每次用户选中内容时触发判断逻辑
• 在事件回调中，获取用户当前选中的文本内容、以及选中内容的起始和结束下标
• 定位目标文本world在textarea全文中的起始和结束下标（如果有多个匹配可以按需匹配第一个/指定位置的匹配项）
• 判断用户当前选中的范围是否刚好和目标文本的位置完全重合，符合条件则执行自定义逻辑

完整代码示例 #

// 假设textarea的id为demoTextarea
const $textarea = $('#demoTextarea');
const targetText = 'world';

$textarea.on('select', function(e) {
  const fullText = this.value;
  // 动态计算目标文本位置，支持文本内容动态修改的场景
  const targetStart = fullText.indexOf(targetText);
  const targetEnd = targetStart + targetText.length;
  // 获取用户选中内容的信息
  const selectionStart = this.selectionStart;
  const selectionEnd = this.selectionEnd;
  const selectedText = fullText.substring(selectionStart, selectionEnd);

  // 判断选中内容是否完全匹配目标文本，且位置一致
  if (selectedText === targetText && selectionStart === targetStart && selectionEnd === targetEnd) {
    // 此处替换为你要执行的逻辑
    console.log('你选中了world文本');
  }
});

拓展方案（支持直接绑定事件） #

如果需要更灵活的交互，比如选中文本后自动高亮，可以用contenteditable属性的div代替textarea，把目标文本单独用<span>标签包裹，就可以直接给目标文本节点绑定事件，示例如下：

<!-- HTML部分 -->
<div id="editableDiv" contenteditable="true">
  Hello <span id="targetWorld">world</span>
</div>

// jQuery绑定部分
$('#targetWorld').on('select', function() {
  console.log('选中了world');
});

内容的提问来源于stack exchange，提问作者Mamadou Hamzaah MAREGA