js-getSelection获取选中内容
在 Vue 项目中使用 getSelection() 获取用户选中的文本
在 Web 开发中，window.getSelection() 是一个强大的 API，它允许我们获取用户当前在页面上选中的文本内容。本文将介绍如何在 Vue 项目中使用该方法，并结合一些典型应用场景给出示例。
一、getSelection() 是什么？
getSelection() 是 window 对象上的方法，用于返回一个表示用户当前所选文本范围的 Selection 对象。你可以从这个对象中提取文本内容、获取选区的起止节点、修改选区等。
const selection = window.getSelection();
console.log(selection.toString()); // 输出当前选中的文本内容
二、常见应用场景
- 富文本编辑器： 需要插入标签、格式化选中文本。
- 文字注释/高亮： 获取用户选中的文本范围，在原文中添加高亮背景或注释。
- 复制/引用功能： 自动提取并操作选中文本。
三、在 Vue 中使用 getSelection()
我们可以在 Vue 组件中通过事件监听（例如点击按钮）来调用该方法：
示例组件：获取用户选中的文本
<template><div><p ref="textBlock">请选中这段文字中的任意部分，然后点击下方按钮查看你选中了什么。</p><button @click="getSelectedText">获取选中文本</button><p v-if="selectedText">你选中了: "{{ selectedText }}"</p></div>
</template><script setup>
import { ref } from 'vue';const selectedText = ref('');
const getSelectedText = () => {const selection = window.getSelection();selectedText.value = selection ? selection.toString() : '';
};
</script>
注意事项
- 跨元素选区：
getSelection()支持跨多个元素的选区，你可以遍历selection.rangeCount来获取每个Range。 - 无法获取隐藏元素中的内容： 如果选中的内容被 CSS 隐藏（如
display: none），将无法被获取。 - 受限于 Shadow DOM：
getSelection()无法直接获取 Shadow DOM 中的选区内容。
四、拓展：插入 HTML 或高亮选中的文字
可以结合 Range 对象实现更复杂的功能，比如插入高亮标记：
const selection = window.getSelection();
if (!selection.rangeCount) return;const range = selection.getRangeAt(0);
const span = document.createElement('span');
span.style.backgroundColor = 'yellow';
span.textContent = range.toString();range.deleteContents();
range.insertNode(span);
⚠️ 小提示： 修改选区 DOM 会破坏原始结构，请确保插入操作符合预期，必要时做节点备份。
五、封装成 Vue 指令（可选）
你也可以封装一个自定义指令来处理选区逻辑，便于复用。
// directives/select-highlight.js
export default {mounted(el, binding) {el.addEventListener('mouseup', () => {const selection = window.getSelection();const text = selection.toString();if (text) {binding.value(text); // 执行绑定的回调函数}});},
};
使用方式：
<div v-select-highlight="onSelectText">选我试试！</div><script setup>
import selectHighlight from './directives/select-highlight';
import { onMounted } from 'vue';const onSelectText = (text) => {console.log('你选中了:', text);
};onMounted(() => {// 注册全局或局部指令
});
</script>
还有一种场景上也可以用到getSelection,当我们点击列表中的一项进入详情，但是长按标题时我们又想复制，不触发跳转详情事件，这个时候我们只需要在点击事件中判断下当前是否选中了文本，如果选中了就阻止默认事件，就不会触发跳转详情事件。
const selectedText = window.getSelection()?.toString()
if (selectedText) {return
}
六、总结
getSelection() 是处理用户选中文本的利器，结合 Vue 的响应式系统和模板语法，可以实现很多有趣而实用的功能。无论是文字编辑、批注、高亮，还是富文本场景，它都能派上用场。