欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中getSelection獲取選中內容實現(xiàn)示例(vue項目)

 更新時間：2025年08月08日 08:28:49   作者：黑匣子~  
在JavaScript中獲取選中內容通常是指獲取用戶在網頁上選中的文本或者其他可選擇的元素,這篇文章主要介紹了JavaScript中getSelection獲取選中內容實現(xiàn)的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

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

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

一、getSelection()是什么？

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

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

二、常見應用場景

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

三、在 Vue 中使用getSelection()

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

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

<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。
  • 無法獲取隱藏元素中的內容： 如果選中的內容被 CSS 隱藏（如 display: none），將無法被獲取。
  • 受限于 Shadow DOM： getSelection() 無法直接獲取 Shadow DOM 中的選區(qū)內容。

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

可以結合 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é)點備份。

五、封裝成 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í)行綁定的回調函數(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ā)跳轉詳情事件，這個時候我們只需要在點擊事件中判斷下當前是否選中了文本，如果選中了就阻止默認事件，就不會觸發(fā)跳轉詳情事件。

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

六、總結

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

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

相關文章

最新評論