JavaScript之Range--或许会有点用
Range是JavaScript的内置对象,一般来讲用到的地方不是很多,主要是一些交互性比较强的场景可能会用到,比如高亮标注,用不到还好说,如果用到了查资料确实也是比较少的, 所以这里总结一下笔记,不会太深入。
需要注意的是这里很多方法都属于实验性功能, 所以生产环境使用的使用需要谨慎,具体可以参考MDN。这里不赘述了。
range的应用场景
这类相对比较生僻的api应用常见并不是很多, 这里我们先了解一下range的应用场景.
-
就是常见的高亮标注电子书之类的
-
人工标注机器学习所需的基础文档(我所做的)
当然应该也有很多其他场景, 我也没怎么接触. 有兴趣的可以自行了解
Range是什么
顾名思义,Range其实可以认为是一个选中的文字范围, 但是Range又不依赖于鼠标选中, 我们可以自行构造或者克隆。不过在细说Range之前我们先了解一下Selection。
如图当我们选中一段文字时, 我们就以通过window.getSelection
来获取Selection对象
Selection可以window.getSelection().toString()
直接获取选中的文字, 但是很多时候我们并不是要获取选中的文字,而是要得到选中文字所在位置并将其存储起来。这时候就是Range发挥作用的地方了。
window.getSelection().getRangeAt(0)
可以将一个Selection对象转化为Range对象。
如上图,我们知道Dom元素排列是一段一段的, 这里的container就是指的每个段,offset就是选中的位置。Range肯定是连续的,这样我们就可以定位一段完整的Range。
Range的存储
如果作为高亮, Range必然是要存到服务器上的, 但是作为js对象, Range不可以直接存到数据库里,这时候就要对Range进行一定的处理了。
上面提到过Range是可以手动创建的:document.createRange
:
var range = document.createRange(); range.setStart(startNode, startOffset); range.setEnd(endNode, endOffset);
这里startNode
指startContainer, 自然就是指dom元素了,看到这里其实大家心里也该有点方案了,不好存储的无非就是dom元素了,那我们将dom元素转为选择器存起来就好了, 到时再通过选择器获取dom元素。
当然我们也有其他选择: xpath, 主要是我接手项目的时候就是利用的xpath, 将dom转为xpath的代码如下:
// 获取一个元素的xpath function getElementXPath (element) { if (!element) return null if (element.id) { return `//*[@id=${element.id}]` } else if (element.tagName === 'BODY') { return '/html/body' } else { const sameTagSiblings = Array.from(element.parentNode.childNodes) .filter(e => e.nodeName === element.nodeName) const idx = sameTagSiblings.indexOf(element) return getElementXPath(element.parentNode) + '/' + element.tagName.toLowerCase() + (sameTagSiblings.length > 1 ? `[${idx + 1}]` : '') } }
将xpath转化为Range:
function createRangeFromXPathRange (xpathRange) { var startContainer, endContainer, endOffset, evaluator = new XPathEvaluator() // must have legal start and end container nodes startContainer = evaluator.evaluate( xpathRange.startContainerPath, document.documentElement, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ) if (!startContainer.singleNodeValue) { return null } if (xpathRange.collapsed || !xpathRange.endContainerPath) { endContainer = startContainer endOffset = xpathRange.startOffset } else { endContainer = evaluator.evaluate( xpathRange.endContainerPath, document.documentElement, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ) if (!endContainer.singleNodeValue) { return null } endOffset = xpathRange.endOffset } // map to range object var range = document.createRange() range.setStart(startContainer.singleNodeValue, xpathRange.startOffset) range.setEnd(endContainer.singleNodeValue, endOffset) return range }
原文发布时间为:2018年06月02日
原文作者:_xiadd_
本文来源: 掘金 如需转载请联系原作者
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
到底啥是JavaScript Mock
原文:But really, what is a JavaScript mock? By Ken C. Dodds 删减了前几段吹牛逼的内容,直接进入正题 第0步 要想知道mock是啥,首先得有东西让你去测、去mock,下面是我们要测试的代码: import {getWinner} from './utils' function thumbWar(player1, player2) { const numberToWin = 2 let player1Wins = 0 let player2Wins = 0 while (player1Wins < numberToWin && player2Wins < numberToWin) { const winner = getWinner(player1, player2) if (winner === player1) { player1Wins++ } else if (winner === player2) { player2Wins++ } } return player1Wins > player...
- 下一篇
[JSConf EU 2018] 大脑控制 Javascript
先解释,本人为前端菜鸟,之前也未参加过类似的活动,没有翻译过什么文章,此次是好奇心使然,也是想尝试下,学习学习,英文很烂,全靠有道,但是视频整个看下来,还是很有收获的,现在来分享一下! 主题:Explore alternative interactions 本文主要探索的是交互。 日常的生活离不开交互,我们的智能手环、语音输入、感应系统、面部识别、生物反馈全都是比较新型的交互方式。 回归到最初的生物活动: 当你想走路的时候,这个信号触发大脑产生信号,大脑再把信号传递给身体,身体得到信号,才会有走路这个动作。 作者就根据这样一个最基本的原理,自己写了一个Epoc.js;后台使用C++,Node.js加载项,使用Javascript实时访问数据,获取面部表情,根据获取到的表情,来控制键盘。 传感器的感应点 模拟的键盘与感应设备 代码分享: 目前的一些限制 技术限制 1.当用户第一次使用的时候,需要培训; 2.不能追踪一切; 3.延迟;它必须关注和检查当前脑电波之间的所有时间差异,以及它所知道的所有模式,所以在思考和聚焦之间有一个延迟。 用户体验的限制 1.无法实现真正的无缝互动:作为开发人...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果