尧图网站建设 ` 获取浏览器中当前选中的文本)
教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载本文围绕 30-seconds-of-code 仓库中的 get-selected-text 文档 展开讲解如何用一行 JavaScript 代码读取浏览器页面中用户当前选中的文本并深入Selection对象的原理、边界情况与实战落地复制选中文本、自定义右键菜单、字数统计等。读完本文你将掌握Window.getSelection()/Selection.toString()的完整用法并能将其与剪贴板操作、选区恢复等进阶技巧组合使用。核心实现一行代码读取选中文本在处理浏览器中的文本时常常需要获取当前选中的文本以便实现复制粘贴、文本高亮、自定义上下文菜单等功能。JavaScript 为此提供了Window.getSelection()它返回一个表示文档中当前选中文本的Selection对象随后调用Selection.toString()即可拿到实际的文本内容const getSelectedText () window.getSelection().toString(); getSelectedText(); // Lorem ipsum这就是 30-seconds-of-code 中该代码片段 get-selected-text.md 的完整实现一个箭头函数返回window.getSelection().toString()的结果简洁、可读、开箱即用。两个关键 API 的角色分工Window.getSelection()返回一个Selection对象代表页面中由用户通过鼠标或键盘划定的当前选中区域。它是window上的全局方法等价于document.getSelection()该术语被仓库收录在 content/languages/javascript.yaml 的 API 参考表中。Selection.toString()将选区转换为纯文本字符串。它返回的是选区覆盖文本节点的拼接结果不含任何 HTML 标签这与 textcontent-or-innertext.md 中讨论的textContent/innerText语义有本质区别——Selection.toString()的结果更接近用户真正划选出来的那段文字而元素文本属性是围绕 DOM 节点的。两个 API 均在仓库的语言参考文件中被明确登记Window.getSelection()见 content/languages/javascript.yamlSelection.toString()见 content/languages/javascript.yaml说明它们被 30-seconds-of-code 视为浏览器开发的基础能力。理解Selection对象从对象到文本的完整链路Selection是浏览器提供的选区模型其内部由Range组成一次选区通常包含一个或多个Range对象如按住 Ctrl 划选多个区域时会有多个。Selection.toString()是获取选中文本最快捷的方式但理解底层结构有助于处理更复杂的场景Selection.rangeCount当前选区的Range数量0 表示没有选区。Selection.getRangeAt(index)按索引取出对应的Range对象可进一步获取起止节点与偏移量。仓库中的进阶示例 copy-text-to-clipboard.md 完整演示了这一套 API 的组合用法const selected document.getSelection().rangeCount 0 ? document.getSelection().getRangeAt(0) : false; // ...执行复制操作后... if (selected) { document.getSelection().removeAllRanges(); document.getSelection().addRange(selected); }这段代码先通过rangeCount判断是否存在选区用getRangeAt(0)暂存用户的原始选区最后用removeAllRanges()与addRange()将其恢复。这正是getSelectedText所在文档末尾备注中提到的更高级用例先读取/暂存选区再操作选区最后还原选区。对应的Selection.getRangeAt()也在 content/languages/javascript.yaml 中被收录。实战把选中文本用起来getSelectedText()单独使用价值有限通常要挂在事件里与业务逻辑组合。以下场景可直接落地1. 点击按钮复制选中文本将getSelectedText与剪贴板 API 组合用户划选文字后点击按钮即可复制。完整方案见仓库文档 copy-text-to-clipboard.md其中现代方案基于异步Clipboard APIconst getSelectedText () window.getSelection().toString(); const copyToClipboard str { if (navigator navigator.clipboard navigator.clipboard.writeText) return navigator.clipboard.writeText(str); return Promise.reject(The Clipboard API is not available.); }; copyButton.addEventListener(click, async () { await copyToClipboard(getSelectedText()); });注意剪贴板写入通常要求由用户手势触发clipboard.writeText()返回 Promise需要用async/await或.catch()处理失败如权限拒绝。2. 自定义上下文菜单 / 划词提示监听mouseup或selectionchange事件实时读取选中文本并渲染自定义菜单document.addEventListener(mouseup, () { const text window.getSelection().toString(); if (text.trim()) { showCustomMenu(text); // 自定义的划词菜单 } });3. 选中字数 / 字符统计配合selectionchange或按钮事件将选中的文本交给String.prototype.length或分词逻辑处理实现字数统计工具。边界情况与注意事项空选区的返回结果当页面上没有选中任何文本时window.getSelection().toString()返回空字符串而不是null因此getSelectedText()是安全的无需额外判空即可直接拼接、统计或传给剪贴板。若需要区分无选区与选中了空文本可结合rangeCount 0判断。输入框内的文本选择Window.getSelection()只描述页面文档中的选区textarea与input内部文本的选中状态不反映在其中。要读取表单控件内的选中文本应使用HTMLInputElement.selectionStart/selectionEnd或HTMLTextAreaElement上的对应属性而不是getSelection()。iframe 与跨文档选区每个文档拥有独立的选区上下文window.getSelection()只能拿到当前窗口所在文档的选区若目标文本位于同源 iframe 内需要进入该 iframe 的contentDocument再调用其getSelection()。焦点与选区的区别需要特别提醒焦点focus和选区selection不是一回事。仓库另一篇文档 select-focused-dom-element.md 指出获取当前聚焦元素应使用document.activeElement或 CSS 的:focus选择器而选区指的是内容高亮区域。两者常被混淆实现划词与获焦类功能时务必区分。浏览器兼容与依赖说明Window.getSelection()与Selection.toString()是标准化多年的 Web API在现代浏览器中普遍可用document.getSelection()亦为等价的兼容写法。这与仓库中 copy-text-to-clipboard.md 对 Clipboard API仍存在兼容性差异、需提供回退方案的说明不同——读取选区文本无需用户授权也不受剪贴板权限模型约束因此getSelectedText可以在任意时机安全调用。该片段属于仓库 browser.yaml 集合 中定义的 JavaScript Browser Articles 分类适用于所有浏览器环境下的 DOM 交互场景。小结核心一行const getSelectedText () window.getSelection().toString();Selection对象通过rangeCount/getRangeAt(index)暴露底层Range支持选区暂存与恢复。读取选中文本常与复制到剪贴板copy-text-to-clipboard.md、自定义菜单、字数统计组合使用。注意空选区返回空字符串、输入框文本需走selectionStart/End、同源 iframe 需切换文档上下文、焦点与选区概念不可混同。赞分享教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载相关推荐30 seconds of code用 JavaScript 获取当前页面 URL 的完整指南30 seconds of code用 JavaScript 获取当前页面 URL 的完整指南 导读 在浏览器端开发中获取当前页面完整地址是最常见的需求之一教程文档30 seconds of code用 process 与 window 判断当前 JavaScript 环境是 Node.js 还是浏览器30 seconds of code用 process 与 window 判断当前 JavaScript 环境是 Node.js 还是浏览器 在浏览器和服务器教程文档30-seconds-of-code 教程使用 git rev-parse --abbrev-ref HEAD 获取 Git 当前分支名30 seconds of code 教程使用 git rev parse abbrev ref HEAD 获取 Git 当前分支名 git rev pars教程文档创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 30-seconds-of-code：用 `Window.getSelection()` 获取浏览器中当前选中的文本
教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载本文围绕 30-seconds-of-code 仓库中的 get-selected-text 文档 展开讲解如何用一行 JavaScript 代码读取浏览器页面中用户当前选中的文本并深入Selection对象的原理、边界情况与实战落地复制选中文本、自定义右键菜单、字数统计等。读完本文你将掌握Window.getSelection()/Selection.toString()的完整用法并能将其与剪贴板操作、选区恢复等进阶技巧组合使用。核心实现一行代码读取选中文本在处理浏览器中的文本时常常需要获取当前选中的文本以便实现复制粘贴、文本高亮、自定义上下文菜单等功能。JavaScript 为此提供了Window.getSelection()它返回一个表示文档中当前选中文本的Selection对象随后调用Selection.toString()即可拿到实际的文本内容const getSelectedText () window.getSelection().toString(); getSelectedText(); // Lorem ipsum这就是 30-seconds-of-code 中该代码片段 get-selected-text.md 的完整实现一个箭头函数返回window.getSelection().toString()的结果简洁、可读、开箱即用。两个关键 API 的角色分工Window.getSelection()返回一个Selection对象代表页面中由用户通过鼠标或键盘划定的当前选中区域。它是window上的全局方法等价于document.getSelection()该术语被仓库收录在 content/languages/javascript.yaml 的 API 参考表中。Selection.toString()将选区转换为纯文本字符串。它返回的是选区覆盖文本节点的拼接结果不含任何 HTML 标签这与 textcontent-or-innertext.md 中讨论的textContent/innerText语义有本质区别——Selection.toString()的结果更接近用户真正划选出来的那段文字而元素文本属性是围绕 DOM 节点的。两个 API 均在仓库的语言参考文件中被明确登记Window.getSelection()见 content/languages/javascript.yamlSelection.toString()见 content/languages/javascript.yaml说明它们被 30-seconds-of-code 视为浏览器开发的基础能力。理解Selection对象从对象到文本的完整链路Selection是浏览器提供的选区模型其内部由Range组成一次选区通常包含一个或多个Range对象如按住 Ctrl 划选多个区域时会有多个。Selection.toString()是获取选中文本最快捷的方式但理解底层结构有助于处理更复杂的场景Selection.rangeCount当前选区的Range数量0 表示没有选区。Selection.getRangeAt(index)按索引取出对应的Range对象可进一步获取起止节点与偏移量。仓库中的进阶示例 copy-text-to-clipboard.md 完整演示了这一套 API 的组合用法const selected document.getSelection().rangeCount 0 ? document.getSelection().getRangeAt(0) : false; // ...执行复制操作后... if (selected) { document.getSelection().removeAllRanges(); document.getSelection().addRange(selected); }这段代码先通过rangeCount判断是否存在选区用getRangeAt(0)暂存用户的原始选区最后用removeAllRanges()与addRange()将其恢复。这正是getSelectedText所在文档末尾备注中提到的更高级用例先读取/暂存选区再操作选区最后还原选区。对应的Selection.getRangeAt()也在 content/languages/javascript.yaml 中被收录。实战把选中文本用起来getSelectedText()单独使用价值有限通常要挂在事件里与业务逻辑组合。以下场景可直接落地1. 点击按钮复制选中文本将getSelectedText与剪贴板 API 组合用户划选文字后点击按钮即可复制。完整方案见仓库文档 copy-text-to-clipboard.md其中现代方案基于异步Clipboard APIconst getSelectedText () window.getSelection().toString(); const copyToClipboard str { if (navigator navigator.clipboard navigator.clipboard.writeText) return navigator.clipboard.writeText(str); return Promise.reject(The Clipboard API is not available.); }; copyButton.addEventListener(click, async () { await copyToClipboard(getSelectedText()); });注意剪贴板写入通常要求由用户手势触发clipboard.writeText()返回 Promise需要用async/await或.catch()处理失败如权限拒绝。2. 自定义上下文菜单 / 划词提示监听mouseup或selectionchange事件实时读取选中文本并渲染自定义菜单document.addEventListener(mouseup, () { const text window.getSelection().toString(); if (text.trim()) { showCustomMenu(text); // 自定义的划词菜单 } });3. 选中字数 / 字符统计配合selectionchange或按钮事件将选中的文本交给String.prototype.length或分词逻辑处理实现字数统计工具。边界情况与注意事项空选区的返回结果当页面上没有选中任何文本时window.getSelection().toString()返回空字符串而不是null因此getSelectedText()是安全的无需额外判空即可直接拼接、统计或传给剪贴板。若需要区分无选区与选中了空文本可结合rangeCount 0判断。输入框内的文本选择Window.getSelection()只描述页面文档中的选区textarea与input内部文本的选中状态不反映在其中。要读取表单控件内的选中文本应使用HTMLInputElement.selectionStart/selectionEnd或HTMLTextAreaElement上的对应属性而不是getSelection()。iframe 与跨文档选区每个文档拥有独立的选区上下文window.getSelection()只能拿到当前窗口所在文档的选区若目标文本位于同源 iframe 内需要进入该 iframe 的contentDocument再调用其getSelection()。焦点与选区的区别需要特别提醒焦点focus和选区selection不是一回事。仓库另一篇文档 select-focused-dom-element.md 指出获取当前聚焦元素应使用document.activeElement或 CSS 的:focus选择器而选区指的是内容高亮区域。两者常被混淆实现划词与获焦类功能时务必区分。浏览器兼容与依赖说明Window.getSelection()与Selection.toString()是标准化多年的 Web API在现代浏览器中普遍可用document.getSelection()亦为等价的兼容写法。这与仓库中 copy-text-to-clipboard.md 对 Clipboard API仍存在兼容性差异、需提供回退方案的说明不同——读取选区文本无需用户授权也不受剪贴板权限模型约束因此getSelectedText可以在任意时机安全调用。该片段属于仓库 browser.yaml 集合 中定义的 JavaScript Browser Articles 分类适用于所有浏览器环境下的 DOM 交互场景。小结核心一行const getSelectedText () window.getSelection().toString();Selection对象通过rangeCount/getRangeAt(index)暴露底层Range支持选区暂存与恢复。读取选中文本常与复制到剪贴板copy-text-to-clipboard.md、自定义菜单、字数统计组合使用。注意空选区返回空字符串、输入框文本需走selectionStart/End、同源 iframe 需切换文档上下文、焦点与选区概念不可混同。赞分享教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载相关推荐30 seconds of code用 JavaScript 获取当前页面 URL 的完整指南30 seconds of code用 JavaScript 获取当前页面 URL 的完整指南 导读 在浏览器端开发中获取当前页面完整地址是最常见的需求之一教程文档30 seconds of code用 process 与 window 判断当前 JavaScript 环境是 Node.js 还是浏览器30 seconds of code用 process 与 window 判断当前 JavaScript 环境是 Node.js 还是浏览器 在浏览器和服务器教程文档30-seconds-of-code 教程使用 git rev-parse --abbrev-ref HEAD 获取 Git 当前分支名30 seconds of code 教程使用 git rev parse abbrev ref HEAD 获取 Git 当前分支名 git rev pars教程文档创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考