Open yanlele opened 1 month ago
关键词:DOM getSelection 方法
主要考察 dom 方法, getSelection 属于很冷门知识, 只会在做过富文本的同学面试过程中可能会问得到。
getSelection
在富文本环境中实现划词(鼠标滑动选择一组字符并对其进行操作)通常涉及以下几个关键步骤和技术:
事件监听
选择范围计算
Selection
操作处理
以下是一个简单的 JavaScript 示例,展示了如何获取选中的文本:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <p>这是一段示例文本,您可以尝试选中一部分。</p> <script> document.addEventListener("mouseup", function () { const selection = window.getSelection(); if (selection) { const selectedText = selection.toString(); console.log("选中的文本: ", selectedText); } }); </script> </body> </html>
关键词:DOM getSelection 方法
在富文本环境中实现划词(鼠标滑动选择一组字符并对其进行操作)通常涉及以下几个关键步骤和技术:
事件监听
选择范围计算
Selection
对象来获取和管理选择的范围。在鼠标移动过程中,不断更新Selection
对象的范围。操作处理
以下是一个简单的 JavaScript 示例,展示了如何获取选中的文本: