首页 > 网络编程 > JavaScript > javascript技巧 > js getSelection获取选中内容

JavaScript中getSelection获取选中内容实现示例(vue项目)

2025-08-08 08:28:40 作者：黑匣子~

在JavaScript中获取选中内容通常是指获取用户在网页上选中的文本或者其他可选择的元素,这篇文章主要介绍了JavaScript中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 的响应式系统和模板语法，可以实现很多有趣而实用的功能。无论是文字编辑、批注、高亮，还是富文本场景，它都能派上用场。

到此这篇关于JavaScript中getSelection获取选中内容的文章就介绍到这了,更多相关js getSelection获取选中内容内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！