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

const selection = window.getSelection();
console.log(selection.toString()); // 输出当前选中的文本内容

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

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

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

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