在前端开发中，经常会遇到需要获取用户在网页中所选文本的需求。npm 包 browser-selected-text 可以帮助我们快速地实现这个功能，并且还提供了一些其他的选中文本操作。
安装
使用 npm 安装 browser-selected-text：
npm install browser-selected-text
使用方法
获取选中文本
首先，我们需要在需要获取选中文本的元素上调用 browser-selected-text，例如：
<div id="text-container"> <p>这是一段文本。</p> <p>这是另一段文本。</p> </div>
import BrowserSelectedText from 'browser-selected-text';
const textContainer = document.getElementById('text-container');
textContainer.addEventListener('mouseup', () => {
const selectedText = BrowserSelectedText.getText();
console.log(selectedText);
});上面的代码演示了如何在 #text-container 上监听鼠标抬起事件，当选中文本时，会将选中文本输出到控制台上。
改变选中文本的样式
我们可以通过 setTextStyle 方法改变选中文本的样式。例如：
BrowserSelectedText.setTextStyle({backgroundColor: 'yellow'});这段代码会将选中文本的背景色设置为黄色。
获取选中文本在 DOM 树中的信息
BrowserSelectedText 还提供了 getSelectionInfo 方法，可以获取选中文本在 DOM 树中的信息。
textContainer.addEventListener('mouseup', () => {
const selectionInfo = BrowserSelectedText.getSelectionInfo();
console.log(selectionInfo);
});这段代码会在选中文本后输出一个包含选中文本在 DOM 树中信息的对象，例如：
{
commonAncestorContainer: {nodeName: "DIV", nodeValue: null, childNodes: Array(2), ...},
startContainer: {nodeName: "P", nodeValue: null, childNodes: Array(1), ...},
endContainer: {nodeName: "P", nodeValue: null, childNodes: Array(1), ...},
startOffset: 7,
endOffset: 2,
toString: ƒ toString()
}取消选中文本
使用 removeSelection 方法可以取消选中文本，例如：
BrowserSelectedText.removeSelection();
示例代码
<div id="text-container"> <p>这是一段文本。</p> <p>这是另一段文本。</p> </div>
-- -------------------- ---- ------- ------ ------------------- ---- ------------------------ ----- ------------- - ------------------------------------------ ----------------------------------------- -- -- - ----- ------------ - ------------------------------ -------------------------- -------------------------------------------------- ----------- ----- ------------- - --------------------------------------- --------------------------- -------------------------------------- ---
总结
通过阅读本教程，我们了解了如何使用 npm 包 browser-selected-text 获取选中文本，并且掌握了如何操作选中文本的样式和获取选中文本在 DOM 树中的信息。这个 npm 包在实际开发中可以帮助我们更快地完成一些用户选中文本相关的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde51cd