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

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

一、getSelection()是什么？

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

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

二、常見應(yīng)用場(chǎng)景

1. 富文本編輯器： 需要插入標(biāo)簽、格式化選中文本。
2. 文字注釋/高亮： 獲取用戶選中的文本范圍，在原文中添加高亮背景或注釋。
3. 復(fù)制/引用功能： 自動(dòng)提取并操作選中文本。

三、在 Vue 中使用getSelection()

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

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

<template>
  <div>
    <p ref="textBlock">
      請(qǐng)選中這段文字中的任意部分，然后點(diǎn)擊下方按鈕查看你選中了什么。
    </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>

注意事項(xiàng)

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

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

可以結(jié)合 Range 對(duì)象實(shí)現(xiàn)更復(fù)雜的功能，比如插入高亮標(biāo)記：

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 會(huì)破壞原始結(jié)構(gòu)，請(qǐng)確保插入操作符合預(yù)期，必要時(shí)做節(jié)點(diǎn)備份。

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

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

// 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(() => {
  // 注冊(cè)全局或局部指令
});
</script>

還有一種場(chǎng)景上也可以用到getSelection,當(dāng)我們點(diǎn)擊列表中的一項(xiàng)進(jìn)入詳情，但是長(zhǎng)按標(biāo)題時(shí)我們又想復(fù)制，不觸發(fā)跳轉(zhuǎn)詳情事件，這個(gè)時(shí)候我們只需要在點(diǎn)擊事件中判斷下當(dāng)前是否選中了文本，如果選中了就阻止默認(rèn)事件，就不會(huì)觸發(fā)跳轉(zhuǎn)詳情事件。

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

六、總結(jié)

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

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