js range 对象研究

最新推荐文章于 2022-02-15 17:09:08 发布

原创最新推荐文章于 2022-02-15 17:09:08 发布 · 797 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了HTML DOM中的Range对象及其四个核心属性：startContainer、startOffset、endContainer和endOffset。通过实例展示了如何利用这些属性来定位文档中的文本片段，并解释了如何通过range.text()方法获取选中范围内的文本内容。

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

range对象光标对象

他有4个常用属性

startContainer

startoffset

endContainer

endoffset

举个例子

range : span 1 div 1

首先startoffset 代表光标在 startContainer的第一个元素后面，

<span>

撒打算

</span>

span有3个子元素 3个文字节点

startoffset 为2时，就在第二个文字节点后面，就是撒打算后面

同理 endoffset也是

然后通过 range.text()就可以获取文本

rangy.js 第三方js

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq178514581

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JavaScript 中的 Range 和 Selection 对象

guoqkmiss的博客

05-23

1761

最近在做鼠标框选的需求，鼠标框选就需要用到Range和Selection对象。Range表示选择的区间范围，Selection表示选择的文档内容。下面就详细说下这两个对象。

range滑块自定义样式，步骤详解以及实际应用

weixin_33675507的博客

04-16

1664

写在前面：本文的主要内容包括：type="range"属性介绍，修改range默认css样式以及在js中的实际应用。本文面向前端小白，写的不好之处，请多多见谅。文末有demo链接，可以自行复制到本地进行试验。相关：自定义 range radio select的样式滑轮，按钮，选择框最终要实现的效果：其中包括一部分js代码步骤： 1.range属性相关介绍 2.搭建html结构； 3.cs...

参与评论您还未登录，请先登录后发表或查看评论

JS Range HTML文档/文字内容选中、库及应用介绍

weixin_30821731的博客

11-01

341

一、前面的些话本文的内容基本上是基于“区域范围对象(Range objects)”这个概念来说的。这个玩意，可以让你选择HTML文档的任意部分，并可以拿这些选择的信息做你想做的事情。其中，最常见的Range是用户用鼠标选择的内容(user selection)。本文有不少篇幅就是讲如何将用户的这种选择转换为W3C Range或Microsoft Text Range对象。二、什么是Ra...

js_Range

bh1990的专栏

01-20

1228

Insert title here var EventUtil={ addEventListener:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEven

js中的Range

u014644574的博客

02-15

5357

js中的Range js获取光标位置的坐标

JavaScript Range资源

weixin_34278190的博客

01-08

183

Dom Range Dom Range对象 Javascript标准DOM Range操作(1) Javascript标准DOM Range操作(2) Javascript标准DOM Range操作(3) RangeException 对象 Range(Mozilla) 英文 Selection(Mozilla) 英文 IE TextRange selecti...

HTMLCSS JavaScript学习第14天之custom-range-slider.zip

最新发布

07-03

项目面向的对象主要是计算机科学领域的学生和从业者，尤其是那些正在准备毕业设计课题或是需要完成课程作业的学生。对于那些从事人工智能、计算机科学与技术等相关专业的学习者来说，这个项目能够提供实践操作的机会...

xRange: JavaScript中DOM与xpath及Range互转工具套件

5. XPath到Range的转换：结合前面的功能，这个转换可能允许开发者通过XPath表达式选取文档中的一个区域，并将其转换为Range对象，以便进行后续操作。 xRange套件的出现，极大地简化了开发过程，提高了开发效率。...

iview3-date-range:iview的日期选择控件，做了日期范围的限制，可自定义可选的间隔2个与、3个月等

04-10

这可能涉及到JavaScript的Date对象，以及使用`setMonth()`和`getDate()`等方法来计算和比较日期。项目使用了`yarn build`命令来执行构建过程，这表明它是基于Yarn包管理器进行构建的。Yarn是替代npm的另一种依赖...

Test_invoke_super_range.rar_Superclass

09-14

- `source.js`：虽然JavaScript不支持"super"关键字以相同的方式调用超类（JavaScript的继承机制基于原型链），但这个文件可能是与Java代码相关的辅助脚本或测试工具。在`Test_invoke_super_range.java`中，我们...

Range:Javascript 的 Range 对象

07-02

JavaScript 中的 Range 对象 Range 对象允许您消除循环 (for/while/do=while) 循环。在某种程度上，Array 对象可用于替换循环 (map,forEach)，但这涉及初始化数组。对于大循环，这可能很昂贵。 Range 允许您对一系列值执行 forEach、map、forEach、filter 和 reduce 操作。 rangetest.js 会给你一个如何使用这个对象的想法。这里提供了两种实现。 range.js 定义了一个经典的命令式实现——即方法是使用循环定义的，而 rangeFn.js 提供了一个使用尾递归函数的“函数式”实现。（在后者的情况下，如果运行时不提供尾调用优化，堆栈可能会爆炸，因此目前可以考虑研究这些概念并比较两种方法之间的差异）。两者都有 node.js 导出对象 - 要在浏览器环境中使用它，只需注释掉导出对

js-range:从头到尾生成数字数组序列的函数

06-11

js范围一个函数，用于生成从开始（包括）到结束（不包括）的数字数组序列，逐步，其中开始和结束默认为 0，步为 1。当开始等于结束时，返回空列表。类似于，但没有懒惰。安装 npm i -S js-range 用法 import range from 'js-range' ; range ( 5 , 8 ) ; // [5, 6, 7] range ( 5 , 10 , 2 ) ; // [5, 7, 9] range ( 10 , 5 ) ; // [10, 9, 8, 7, 6] range ( 3 , - 10 , - 3 ) // [3, 0, -3, -6, -9]

jquery_range

10-07

jquery左右滑动选值

rangy-rails:轻轻包裹Rangy javascript库以供您在Rails应用程序中使用的宝石

05-04

兰吉铁路宏伟的编写的简单Rails资产管道包装器，“跨浏览器JavaScript范围和选择库”。 rangy-rails gem包含Rangy核心及其所有模块。 rangy-rails版本将与Rangy的版本保持同步，因为该gem实际上只是增加了将Rangy引入Rails应用程序的便捷方法。 rangy-rails是使用的变体创建的。安装将此行添加到您的应用程序的Gemfile中： gem 'rangy-rails' 然后执行： $ bundle 或将其自己安装为： $ gem install rangy-rails 用法简单的！只需编辑app/assets/javascripts/application.js并对其进行调整即可。这是一个示例示例，其中将包括Rangy及其所有模块： //= require rangy-core //= require rangy-

js range

weixin_33711641的博客

03-06

194

Array.apply(null, Array(5)).map(function (_, i) {return i;}); => [0, 1, 2, 3, 4] [...Array(5).keys()]; => [0, 1, 2, 3, 4] String.fromCharCode(..._.range('A'.charCod...

html5之Range对象详解

Amare丶的部落格

08-10

2989

一：Range对象的概念 Range对象代表页面上一段连续的区域，通过Range对象可以获取或者修改页面上任何区域的内容。也可以通过Range的方法进行复制和移动页面任何区域的元素。在Js的document文档中有一个方法用来创建一个Range对象，代码如下： var range = document.createRange(); 在html5中，每一个浏览器窗口都会有一个select

js操作range

dasong1992的博客

05-30

363

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>404</title><style>*,body{margin:0;padding:0;font-family:Microsoft YaHei,Tahoma,Verdana;font-size:...

JavaScript之Range--或许会有点用

weixin_33824363的博客

06-02

382

Range是JavaScript的内置对象，一般来讲用到的地方不是很多，主要是一些交互性比较强的场景可能会用到，比如高亮标注，用不到还好说，如果用到了查资料确实也是比较少的，所以这里总结一下笔记，不会太深入。需要注意的是这里很多方法都属于实验性功能，所以生产环境使用的使用需要谨慎，具体可以参考MDN。这里不赘述了。 range的应用场景这类相对比较生僻的api应用常见并不是很多, 这里我们...

使用rangy.js获取并控制用户选中的内容(转载 )

sifeimeng的专栏

05-04

2462

转载自： http://keenwon.com/1060.html rangy.js 是一个兼容库（https://code.google.com/p/rangy/），主要用来获取用户鼠标选中的内容。现在很多“分享工具”都有这样的功能，下图是新浪博客的当用户选中一段文字的时候，会出现分享按钮。类似的应用场景非常多：chrome的划词翻译，印象笔记的剪藏，社会化流量分...