0

0

JavaScript中textRange对象使用方法总结

伊谢尔伦

伊谢尔伦

发布时间:2016-11-24 10:18:32

|

1663人浏览过

|

来源于php中文网

原创

textrange对象是动态html(dhtml)的高级特性,使用它可以实现很多和文本有关的任务,例如搜索和选择文本。文本范围让您可以选择性的将字符、单词和句子从文档中挑选出来。textrange对象是在html文档将要显示的文本流上建立开始和结束位置的抽象对象。

下面是TextRange的常用属性与方法:

属性

boundingHeight 获取绑定TextRange对象的矩形的高度

boundingLeft 获取绑定TextRange 对象的矩形左边缘和包含TextRange对象的左侧之间的距离

offsetLeft 获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置

立即学习Java免费学习笔记(深入)”;

offsetTop 获取对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置

htmlText 获取绑定TextRange对象的矩形的宽度

text 设置或获取范围内包含的文本

方法

moveStart 更改范围的开始位置

moveEnd 更改范围的结束位置

collapse 将插入点移动到当前范围的开始或结尾

move 折叠给定文本范围并将空范围移动给定单元数

execCommand 在当前文档、当前选中区或给定范围上执行命令

select 将当前选择区置为当前对象

findText 在文本中搜索文本并将范围的开始和结束点设置为包围搜索字符串。

使用TextRange对象通常包括三个基本的步骤:

1.创建文本范围

2.设置开始点和结束点

3.对范围进行操作

 
 
 

移动光标到第个位置

1.createTextRange()

创建一个TextRange对象,BODY、TEXT、TextArea、BUTTON等元素都支持这个方法。该方法返回一个TextRange对象。

2.move(”Unit”[,count])

move()方法执行两个操作。首先,方法在前一个结束点的位置重叠当前文档,将这里作为一个插入点;下一步,它将插入点向前或向后移动任意个字符、单词或句子单位。

随缘网络php企业网站管理系统2.0
随缘网络php企业网站管理系统2.0

随缘网络PHP企业网站管理系统V2.0正式发布,该企业网站管理系统采用PHP+MYSQL编写,界面色调风格延续之前1.0版管理系统简洁浅蓝色风格,稍有所变动。变更分类树形目录方式采用jquery库,产品,文章三级无限分类。希望大家能够喜欢。系统中难免有些小问题,希望大家在使用中有什么问题可到本站论坛提出,我们将总结各问题后给予修正并升级。本站再次声明对于免费版系列系统本站不提供QQ电话等技术咨询服

下载

方法的第一个参数是字符串,它指定的单位有character(字符)、word(词)、sentence(段落)、textedit。 textedit值将插入点移动到整个文本范围的结束处(不需要参数)。如果指定为前三种单位,忽略参数时默认值为1,也可以指定一个整数值来指示单元 数,正数代表向前移动,负数代表向后移动。

注意在move()方法执行后范围仍是重叠的。

3.select()

select()方法选择当前文本范围内的文本,这里的显示光标也必须利用它来实现,因为所谓的”光标”可以理解为边界重合的范围

 

上面的例子演示了利用moveStart()和moveEne()方法选择范围,出现的几个方法的说明如下:

4.moveStart(”Unit”[,count])与moveEnd(”Unit”[,count])

moveStart()与moveEnd()方法类似于move()方法,默认情况下开始点为容器第一个字符、结束点为最后一个字符

我们可以修改上面的selectText()函数来证明:

function selectText()
{
  var rng = txtBox.createTextRange();
  rng.moveStart("character",1);
  rng.moveEnd("character",-1);
  rng.select();
}

    将开始点向前移动一个字符、结束点向后移动一个字符,运行后可以看到选择的范围是除第1个字符和最后1个字符的整个文本范围。

5.collapse([Boolean])

可以用collapse()方法把文本范围从当前尺寸重叠成字符间的单个插入点。collapse()方法的可选参数是Boolean值,它指出范围是在当前范围的开始点重合,还是结束点重合。默认值为true,在开始点重合:

6.findText(”searchString”[,searchScope,flags])

TextRange对象最有用的方法之一是findText()方法,其默认行为是从开始点到结束点浏览文本范围,搜索一个不区分大小写的字符串 匹配。如果在范围中发现一个实例,范围的开始点和结束点就放到这个文本中,方法返回true;否则返回false,开始点和结束点都不动。方法仅搜索显示 文本,而任何标记或属性都不会被搜索。

可选参数searchScope是一个整数值,它指示从开始点的字符数,值越大,包含在搜索范围的文本越多;负值将迫使搜索操作从当前开始点向后搜索。

可选参数flag用来设置搜索是否区分大小写,或者是否仅匹配整个单词。参数是整数值,它用按位组合的数学方法计算单个值,这些值能容纳一个或多 个设置。匹配整个单词的值为2;匹配大小写的值为4;如果只想匹配一项,则只提供希望的值就够了,但对于两种行为,要用位操作XOR操作符(^操作符)使 值为6。

findText()方法最常用的应用包括范围中的查找和替换操作,以及格式化一个字符串的实例,因为搜索通常以范围的当前开始点开始,所以再次 查询要将开始点移到范围中匹配文本的末尾(如示例3),移动后才能使findText()继续浏览剩下的文本范围,来查找另一个匹配。可以使用 collapse(false)方法迫使开始点移动第一个匹配的范围的结束点。所以示例3的findText()函数也可以修改为:

6.parentElement()

parentElement()方法返回包含文本范围容器的引用

获得光标选中文本的DOM对象

 
 
 
 
 
这是只属于Body的文本 
这是包含在div里的文本

这是包含在p里面的文本

这是包含在div->strong里的文本

   

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Java 项目构建与依赖管理(Maven / Gradle)
Java 项目构建与依赖管理(Maven / Gradle)

本专题系统讲解 Java 项目构建与依赖管理的完整体系,重点覆盖 Maven 与 Gradle 的核心概念、项目生命周期、依赖冲突解决、多模块项目管理、构建加速与版本发布规范。通过真实项目结构示例,帮助学习者掌握 从零搭建、维护到发布 Java 工程的标准化流程,提升在实际团队开发中的工程能力与协作效率。

11

2026.01.12

c++主流开发框架汇总
c++主流开发框架汇总

本专题整合了c++开发框架推荐,阅读专题下面的文章了解更多详细内容。

106

2026.01.09

c++框架学习教程汇总
c++框架学习教程汇总

本专题整合了c++框架学习教程汇总,阅读专题下面的文章了解更多详细内容。

64

2026.01.09

学python好用的网站推荐
学python好用的网站推荐

本专题整合了python学习教程汇总,阅读专题下面的文章了解更多详细内容。

139

2026.01.09

学python网站汇总
学python网站汇总

本专题整合了学python网站汇总,阅读专题下面的文章了解更多详细内容。

13

2026.01.09

python学习网站
python学习网站

本专题整合了python学习相关推荐汇总,阅读专题下面的文章了解更多详细内容。

19

2026.01.09

俄罗斯手机浏览器地址汇总
俄罗斯手机浏览器地址汇总

汇总俄罗斯Yandex手机浏览器官方网址入口,涵盖国际版与俄语版,适配移动端访问,一键直达搜索、地图、新闻等核心服务。

93

2026.01.09

漫蛙稳定版地址大全
漫蛙稳定版地址大全

漫蛙稳定版地址大全汇总最新可用入口,包含漫蛙manwa漫画防走失官网链接,确保用户随时畅读海量正版漫画资源,建议收藏备用,避免因域名变动无法访问。

480

2026.01.09

php学习网站大全
php学习网站大全

精选多个优质PHP入门学习网站,涵盖教程、实战与文档,适合零基础到进阶开发者,助你高效掌握PHP编程。

52

2026.01.09

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.1万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号