文本选择及操作
来源:互联网 发布:伊藤润二漩涡 知乎 编辑:程序博客网 时间:2024/06/05 02:44
应用场景
选取一段文本,对该段文本进行操作
兼容性
- window.getSelection() 或 document.getSelection()
- FF、Chrome、IE9(含)+、Opera、Safari
- document.selection
- IE8
常用属性及方法
var selectionObj = window.getSelection();
获取选取文本的内容
var selectedText = selectionObj.toString();
该方法可以获取到选择的文本内容,不受节点限制
<p>本书原作者 Zakas 长期<span class="selected">供职于雅虎</span>,是著名的 JS 库 YUI 的主要作者,有着非<span class="selected">常丰富的一线</span>工作经验。他同时也是一个成功的作者,其最重要的著作《 JavaScript 高级编程》基本上是 JS 领域的必读之作,而他还出版了另一些质量很高的著作。《高级编程》一书实际上并不是完全高深的内容,而是从基本的层次开始讲述,逐步提高,全书结构比较良好,对初学者或有一定经验的开发者来说都是很有用的。</p>
此时selectedText
为著名的 JS 库
此时selectedText
为于雅虎,是著名
,所以toString
方法不受标签限制,返回选取的文本内容获取选取文本起止点所在节点
var anchorNode = selectionObj.anchorNode;var baseNode = selectionObj.baseNode;var extentNode = selectionObj.extentNode;var focusNode = selectionObj.focusNode;
anchorNode
和baseNode
为选取文本起始点所在节点,extentNode
和focusNode
为选取文本结束点所在节点
此时,不管是从前向后选取还是从后向前选取,选取的文本都在,是著名的 JS 库 YUI 的主要作者,有着非
范围内,所以anchorNode
、baseNode
、extentNode
和focusNode
是相同的
此时,如果是从前向后选取,anchorNode
和baseNode
应该是<span class="selected">供职于雅虎</span>
,extentNode
和focusNode
为,是著名的 JS 库 YUI 的主要作者,有着非
;如果是从后向前选取,则相反获取选取文本在其所在节点中的起止位置
var anchorOffset = selectionObj.anchorOffset;var baseOffset = selectionObj.baseOffset;var extentOffset = selectionObj.extentOffset;var focusOffset = selectionObj.focusOffset;
anchorOffset
和baseOffset
为选取文本起点所在节点的位置(从0开始,从左向右数),extentOffset
和focusOffset
为选取文本结束点所在节点的位置(从0开始,从左向右数)
此时,选取的文本在同一节点内,如果是从前向后选取,则anchorOffset
和baseOffset
为2
,extentOffset
和focusOffset
为10
,因为从,
前开始数0
,到著
字前,为2
,到库
字后,为10
(JS
前后有空格);相反的,如果从后向前选取,则赋值交换
此时,选取的文本不在同一节点内,如果是从前向后选取,则anchorOffset
和baseOffset
为起点雅
字在节点<span class="selected">供职于雅虎</span>
中的起始位置3
(字之前的位置),extentOffset
和focusOffset
为结束点名
字在节点,是著名的 JS 库 YUI 的主要作者,有着非
中的结束位置4
(字之后的位置);如果是从后向前选取,则赋值交换- 判断是否有选取内容
有多种方法可以判断当前是否有选取的内容anchorNode
为null
toString
返回为空anchorOffset
和focusOffset
相等isCollapsed
为true
type
等于Caret
或None
(当有选取内容时,type
为Range
)rangeCount
为0
IE8下的使用
var selectionObj = document.selection;var rangeObj = selectionObj.createRange();
IE8通过createRange
方法将选取的文本作为块处理,位置标记没有起止点之分
{ boundingHeight: 19, boundingLeft: 213, boundingTop: 16, boundingWidth: 96, htmlText: '<SPAN class="selected">雅虎</SPAN>,是著名', offsetLeft: 211, offsetTop: 14, text: '雅虎,是著名'}
在IE8下还可以通过命令execCommand
对选取的文本进行操作
0 0
- 文本选择及操作
- 文本选择及操作
- 文本选择及操作
- Jquery操作select获取当前选择项的文本及事件绑定
- 输入框文本选择及焦点定位
- 文本选择
- vim操作指南,主要是文本跳转选择之类
- 在 Vim 中进行文本选择操作和使用标志
- 屏蔽页面右键及选择文本的方法
- 屏蔽页面右键及选择文本的方法
- JAVA数组操作及选择、冒泡排序
- C#路径选择及Excel读写操作
- jquery操作checkbox方法(全选、全不选、至少选择一个、选择值/文本)
- 文本操作
- 【linux学习】Linux文本操作命令及正则表达式基础
- CKEditor 整合CKFinder实现文件上传及富文本操作
- Python操作Oracle、Mysql及文本进行数据处理
- jQuery属性、CSS类及HTML/文本/值操作
- 线段树模板
- hdoj1005
- C++ 单例(singleton)模式实现
- Linux(Fedora)下安装DB2客户端
- Mac 运行 C/C++
- 文本选择及操作
- App的开发阶段及需要的角色
- weka之Bagging的源码分析及相关知识点
- DS18B20 LCD显示当前温度
- STM32 HEX文件合并的方法
- eval
- linux系统修改PATH环境变量
- 2.Android应用分发那些事
- Android 数据绑定(Data Binding)详解