Selection&Range

最新推荐文章于 2024-05-29 15:55:03 发布
最新推荐文章于 2024-05-29 15:55:03 发布
阅读量474 收藏
点赞数
分类专栏： JS 文章标签： js
本文介绍了不同浏览器中实现文本选中的方法，包括IE及现代浏览器如Firefox和Chrome的API。探讨了Selection对象的使用，以及如何通过setSelectionRange和CreateTextRange实现特定范围的文本选中。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.Selection

  1. IE9以下支持：document.selection
  2. IE10支持：document.getSelection
    IE11、Firefox、Safari、Chrome和Opera支持：window.getSelection();
  3. 该方法返回一个Selection对象，有一些方法和属性，主要围绕以下3个点
    anchor：选中区域的“起点”、
    focus：选中区域的“结束点”、
    range：是一种fragment(HTML片断)，它包含了节点或文本节点的一部分。一般情况下，同一时刻页面中只可能有一个range，也有可能是多个range（使用Ctrl健进行多选，不过有的浏览器不允许，例如Chrome）。可以从selection中获得range对象，也可以使用document.createRange()方法获得(然后自己选起始结束节点)

Selection只是得到了选中区，selection对象的方法和属性也只是选中区的一些信息，要操作选中区，需要其他个方法。(对于文本框,selectStart等就够用了)

2.setSelectionRange(起始位置，结束位置)和CreateTextRange()

在IE浏览器下使用的是createTextRange而Firefox/chrome等现代浏览器下使用的是setSelectionRange。

3.window.getSelection().getRangeAt(0)

承1，在所选区创建Range

只使用jQuery实现简单功能富文本编辑器[关于selection和range的进一步理解运用]
qq_32845305的博客
06-01 645
只使用jQuery实现简单功能富文本编辑器[关于selection和range的进一步理解运用]目的功能要求思路一阶段二阶段更新后的全部代码 目的 在上一篇文章中简单实现了一个文本编辑的功能,但是仅仅只是使用了自带的命令进行操作,基本上是没有其他更深入的运用,所以在此基础上,想通过一些简单的操作来稍微深入的使用一下富文本操作中的selection和range对象. 功能要求 在编辑区域输入一些文字，例如“12345” 选中几个字，例如选中“234” 鼠标点击页面空白处，即非编辑区域 点击“B”加粗按钮
JavaScript 中的 Range 和 Selection 对象
guoqkmiss的博客
05-23 1740
最近在做鼠标框选的需求，鼠标框选就需要用到Range和Selection对象。Range表示选择的区间范围，Selection表示选择的文档内容。下面就详细说下这两个对象。
selection与range笔记
weixin_30901729的博客
10-26 480
selection对象代表当前激活选中区，通常是高亮的文本块 创建选中区: 1.拖拽文本 2.脚本创建 cerateRange() 获取selection对象 IE document.selection() 非IE window.getSelection() eg: <div>请选中这里的部分文字。</div><div> <...
Web APIs 之 Selection对象和Range对象
weixin_45092437的博客
02-12 1351
Selection对象存储了用户在网页上选择的文本范围或者光标符号的位置等信息，代表网页中的文本选区，可能横跨多个元素，包含文本、图片等等。文本选区是由用户点击鼠标左键并拖拽鼠标选中页面内容产生的，也就是指页面上变成蓝底的那一部分内容。 Range对象表示一个包含节点与文本的文档片段，通常与Selection对象结合使用，Selection对象选中的文本选区所对应的文档片段，就是一个Range对象。
Selection和Range对象
赵丹丹 廊坊师范学院信息技术提高班 七期
09-30 3241
前言     其实在对word操作的时候Range对象用到的是最多的， 又由于Range对象与 Selection对象共享许多相同的方法和属性，所以今天我们将他俩放到一起来介绍下，看看他们有哪些共同和不同的地方。 正题 1.处理 Selection对象      用 Word 处理文档时，通常先选定文字，然后对所选内容进行操作，例如设置文字格式或键入文字。在 Visual Bas
Range对象与Selection对象
weixin_45855469的博客
05-04 1113
range对象有以下几个方法，先大致看一下基本的定义，后续的实例中会详细的讲述它们的含义和用法。Range.collapsed 是只读属性。它返回一个 Boolean (en-US) 值表示是否起始点和结束点是同一个位置。如果返回 true 表示Range 的起始位置和结束位置重合，false 表示不重合。Range.commonAncestorContainer 只读属性，返回目标节点的共有祖先节点。Range.endContainer 是一个只读属性。它会返回Range对象结束的Node。
用 js 的 selection range 操作选择区域内容和图片
10-20
本文将详细探讨如何利用JavaScript中的Selection Range API来实现对文档中选定内容的控制。 首先，要了解Selection对象。它是HTML5中新增的一个接口，用于获取或设置用户当前选中的内容。该对象可以通过window....
jquery 判断selection range 是否在容器中的简单实例
10-21
此实例基于对DOM结构的遍历以及对jQuery选择器的运用，可以方便地判断出选中区域（selection range）是否在指定的容器元素内。 知识点一：什么是DOM和Range对象？ DOM（Document Object Model，文档对象模型）是...
如何使用 Range 和 Selection API 精确管理光标位置和选区
Chloeeeeeeee的博客
05-29 1584
Range 和 Selection API 是浏览器提供的用于处理用户文本选区和光标位置的强大工具。Range: 表示文档中的连续区域，可以包含部分节点和文本节点；Selection: 表示用户当前选择的文本范围，通常包含一个或多个 Range 对象。
Range、Selection、TextRange对象的区别与关系
一个有味道的Weber
09-29 2989
Range、Selection、TextRange对象的区别与关系什么是Range所谓Range，是指HTML文档中任意一段内容。一个Range的起始点和结束点位置任意，甚至起始点和结束点可以是一样的（也就是空Range）。最常见的Range是用户文本选择范围(user text selection)。当用户选择了页面上的某一段文字后，你就可以把这个选择转为Range。当然，你也可以直接用程序定义R
JavaScript 选择范围：SelectionRange
爱蹦跶的全栈大A阿
02-13 2034
文本选择是 web 开发中的一个常见需求，例如高亮选定文本、复制粘贴文本、实现文本编辑器等。传统的 JavaScript 方法无法满足所有场景的需求，例如无法获取选定文本的范围、无法操作选定内容等。是浏览器提供的一个 API，用于解决文本选择问题。它可以获取或设置选中的文本、操作选定内容以及扩展或缩小选定范围。理解 SelectionRange的工作原理和应用场景，对于开发人员来说至关重要。掌握 SelectionRange 的工作原理了解如何使用 SelectionRange 获取选定文本的范围。
document中Selection、Range的介绍
08-26 669
Selection对象：      代表窗口或窗格中的当前所选内容。所选内容代表文档中选定（或突出显示）的区域，如果文档中没有选定任何内容，则代表插入点。每个文档窗格只能有一个 Selection 对象，并且在整个应用程序中只能有一个活动的 Selection 对象。 Text 属性是 Selection 对象的默认属性。使用此属性可设置或返回当前所选内容中的文本。 由于 Range 对象与
Html5（4）Selection 和 Range对象
puppyand123的博客
08-10 2283
HTML5的Selection 和 Range对象（一）①概念：代表页面上一段连续区域，通过Range可以修改（增删改）页面上任意区域 ②使用：获取选取内容的方法： 如图 ③Range对象包含几个方法：SelectNode、selectNodeContents、deleteContents 用于选取、删除元素的内容或整个元素结点 举例：如图 ④Range对象的其他方法：se
Javascritp Selection 与 Range
胡聊前端的博客
04-26 223
在操作文本框或者可编辑元素的时候，我们可能会使用到这两个api。在这里简单记录下区别。 Range Selection Selection 指代的是用户选择的区域。该区域可以是多个，但目前谷歌并不支持选择多个，但Firefox应该是支持的。 Range也是代表一段区域，这个这个区域是很抽象的，他不像Selection那样你看到了选择的具有蓝色背景的区域，那就是Selection。而Range可以通过js去构造并选择，而实际用户看不到任何选择。 下图：selection是可以看到的 Range既可以是上
Selection对象
huangpb的博客
05-26 2332
被选择文本示例代码 <p>发大幅<strong>大大泡泡糖</strong>度那附近那<strong>小头爸爸</strong>多好撒节点是的是</p> 以下几个属性和方法兼容性良好，而且对文本和输入框都有效。 var selObj = window.getSelection(); // 获取跟选择范围有关的信息 ...
setSelectionRange()函数-只支持Firefox浏览器-设置文本框某段文字的光标选中
tianyitianyi1的专栏
04-12 7456
例如页面上有一个文本输入框： 则，设置该文本框中的最后三个字符光标选中： var o = document.getElementById("txt"); var len = o.value.length; o.focus();          //先使光标聚集在输入框中 o.setSelectionRange(len-3,len);   //获取光标起始位置
浏览器selection接口
liuyua的专栏
11-25 2181
想实现这么一种功能，用不同的颜色来标记不同的语句成分，即先选择语句成分对应的颜色在对应的语句成分下面画直线，以达到练习英语语法的功能。比如说用红色来表示主语等。         例如：        其中I是主语，用红色标记，love是谓语，用绿色标记，you是宾语，用蓝色标记等等。我们知道，英语语法有主语、谓语、宾语、表语、系动词、状语、定语、补语、同位语、插入语等十种语句成分。这些功能都实现
Range对象介绍
littlejixing的专栏
05-16 2094
Range对象 Selection对象 代表用户鼠标在页面中所选取的区域。每一个浏览器窗口中都有一个selection对象。创建：var selection = document.getSelection(); Range对象 代表用户所选取的一段连续区域。一个Selection对象中包含一个或者多个Range对象。Firefox中可包含多个Range对象，其他浏览
selection.addRange(range)
最新发布
04-09
### 使用 `selection.addRange` 方法 在浏览器的 DOM API 中，`Selection` 对象表示用户当前所选的内容区域。通过该对象可以操作文档中的文本选择范围。其中，`addRange` 是 `Selection` 的方法之一，用于向现有的选择中添加一个新的 `Range` 或 `StaticRange`。 以下是关于如何使用 `selection.addRange` 方法的具体说明： #### 基本语法 ```javascript selection.addRange(range); ``` - 参数 `range` 表示要添加到现有选择的一个有效的 `Range` 或 `StaticRange` 实例[^1]。 #### 浏览器兼容性注意事项 需要注意的是，在某些旧版浏览器中可能不支持此功能。现代主流浏览器如 Chrome, Firefox, Edge 和 Safari 都已实现对 `addRange` 的良好支持[^2]。 #### 示例代码 下面是一个简单的例子来展示如何创建并添加一个 Range 到 Selection: ```javascript // 获取 document 的 body 节点作为上下文 const body = document.body; // 创建新的 range 对象实例 let range = document.createRange(); // 设置 range 开始位置和结束位置 (这里假设有一个 id="example" 的元素存在) let exampleElement = document.getElementById('example'); if (exampleElement) { range.setStart(exampleElement.firstChild, 0); // 设定起始节点及偏移量 range.setEnd(exampleElement.lastChild, exampleElement.textContent.length); // 结束设定 let sel = window.getSelection(); // 得到全局的选择对象 if (!sel.rangeCount || !sel.getRangeAt(0).intersectsNode(exampleElement)) { sel.removeAllRanges(); // 清除之前所有的 ranges 如果有必要的话 sel.addRange(range); // 将新定义好的 range 加入 selection } } ``` 上述脚本首先定位了一个特定 HTML 元素内部的所有子内容作为一个可选取的区间，并将其加入用户的当前选择状态之中[^3]。 #### 关键点解释 - **document.createRange()**: 这是用来初始化一个新的 `Range` 对象的方法。 - **setStart(node, offset)** 及其对应设置终点的方法用来指定这个区间的边界在哪里。 - **window.getSelection().removeAllRanges()** 在重新定义前清除了任何现存的选择以防冲突或重复叠加效果[^4]。 #### 局限性和替代方案 尽管可以直接利用 `addRange`, 不同场景下也可能需要考虑其他方式比如直接修改 DOM 文字节点或者采用更高级别的框架工具处理复杂的交互逻辑[^5]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值