JavaScript中g(shù)etSelection獲取選中內(nèi)容實現(xiàn)示例(vue項目)

更新時間：2025年08月08日 08:28:49 作者：黑匣子~

在JavaScript中獲取選中內(nèi)容通常是指獲取用戶在網(wǎng)頁上選中的文本或者其他可選擇的元素,這篇文章主要介紹了JavaScript中g(shù)etSelection獲取選中內(nèi)容實現(xiàn)的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

在 Vue 項目中使用getSelection()獲取用戶選中的文本

在 Web 開發(fā)中，window.getSelection() 是一個強大的 API，它允許我們獲取用戶當前在頁面上選中的文本內(nèi)容。本文將介紹如何在 Vue 項目中使用該方法，并結(jié)合一些典型應用場景給出示例。

一、getSelection()是什么？

getSelection() 是 window 對象上的方法，用于返回一個表示用戶當前所選文本范圍的 Selection 對象。你可以從這個對象中提取文本內(nèi)容、獲取選區(qū)的起止節(jié)點、修改選區(qū)等。

const selection = window.getSelection();
console.log(selection.toString()); // 輸出當前選中的文本內(nèi)容

二、常見應用場景

富文本編輯器： 需要插入標簽、格式化選中文本。
文字注釋/高亮： 獲取用戶選中的文本范圍，在原文中添加高亮背景或注釋。
復制/引用功能： 自動提取并操作選中文本。

三、在 Vue 中使用getSelection()

我們可以在 Vue 組件中通過事件監(jiān)聽（例如點擊按鈕）來調(diào)用該方法：

示例組件：獲取用戶選中的文本

<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>

注意事項

跨元素選區(qū)： getSelection() 支持跨多個元素的選區(qū)，你可以遍歷 selection.rangeCount 來獲取每個 Range。
無法獲取隱藏元素中的內(nèi)容： 如果選中的內(nèi)容被 CSS 隱藏（如 display: none），將無法被獲取。
受限于 Shadow DOM： getSelection() 無法直接獲取 Shadow DOM 中的選區(qū)內(nèi)容。

四、拓展：插入 HTML 或高亮選中的文字

可以結(jié)合 Range 對象實現(xiàn)更復雜的功能，比如插入高亮標記：

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

?? 小提示： 修改選區(qū) DOM 會破壞原始結(jié)構(gòu)，請確保插入操作符合預期，必要時做節(jié)點備份。

五、封裝成 Vue 指令（可選）

你也可以封裝一個自定義指令來處理選區(qū)邏輯，便于復用。

// 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); // 執(zhí)行綁定的回調(diào)函數(shù)
      }
    });
  },
};

使用方式：

<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,當我們點擊列表中的一項進入詳情，但是長按標題時我們又想復制，不觸發(fā)跳轉(zhuǎn)詳情事件，這個時候我們只需要在點擊事件中判斷下當前是否選中了文本，如果選中了就阻止默認事件，就不會觸發(fā)跳轉(zhuǎn)詳情事件。

const selectedText = window.getSelection()?.toString()
if (selectedText) {
  return
}

六、總結(jié)

getSelection() 是處理用戶選中文本的利器，結(jié)合 Vue 的響應式系統(tǒng)和模板語法，可以實現(xiàn)很多有趣而實用的功能。無論是文字編輯、批注、高亮，還是富文本場景，它都能派上用場。

到此這篇關(guān)于JavaScript中g(shù)etSelection獲取選中內(nèi)容的文章就介紹到這了,更多相關(guān)js getSelection獲取選中內(nèi)容內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: