这篇博客介绍如何在JavaScript中实现获取鼠标选中的文本，并结合Vue项目，讲述如何在选中文本后添加按钮，将选中文本渲染到页面另一位置。利用window.getSelection()方法可以获取选中信息，通过事件监听和DOM操作实现实时更新。
昨天产品提了个需求，要获取选中的文本，并在选中的文本后面加个添加按钮，将选中的文本渲染到另一边。
这个可以通过window.getSelection()来获取选中的信息
<body>
<div>
这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
这是一段文本这是一段文本
</div>
</body>
<script>
window.addEventListener('mouseup', function (e) {
let result = window.getSelection().toString()
console.log(result);
})
</script>给文本添加事件监听，通过window.getSelection()来获取选中的信息
在控制栏打印出来就是你选中的文本了
在我自己的vue项目中我还通过$event事件去改变一个加号的定位选中后可以将加号的位置移动到选中文本的后面
参考链接：js获取选中文本 - 简书
扫一扫
906
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
