JavaScript中textRange对象使用方法小结

什么是textRange对象

textRange对象是指文本范围对象，提供了一种对文本的精确定位和操作的方式。在使用浏览器中的文本框、可编辑的HTML元素时，常常需要使用到textRange对象。textRange对象主要用于选择文本、插入文本、复制/粘贴文本、删除文本等操作。

textRange对象的属性

textRange对象提供了以下几个属性：

• textRange.parentElement()：获取文本范围所在的父元素。
• textRange.text：获取或设置文本范围的文本内容。
• textRange.htmlText：获取或设置文本范围的HTML内容。
• textRange.boundingWidth：获取文本范围显示的宽度。
• textRange.boundingHeight：获取文本范围显示的高度。

textRange对象的方法

textRange对象提供了以下几个方法：

select()

选择文本范围，该方法没有参数。

var range = document.getElementById("myTextArea").createTextRange();
range.select();

collapse()

折叠文本范围，该方法可以接受一个布尔值作为参数，指定折叠的方向。当参数为true时，折叠至文本范围的起始位置，当参数为false时，折叠至文本范围的末尾位置。

var range = document.getElementById("myTextArea").createTextRange();
range.collapse(true);

moveStart()

将文本范围向前移动，该方法可以接受两个参数，第一个参数表示移动的单位类型，如character、word、sentence等，第二个参数表示移动的距离。

var range = document.getElementById("myTextArea").createTextRange();
range.moveStart("character", 3); // 将文本范围向前移动3个字符

moveEnd()

将文本范围向后移动，该方法的参数和moveStart()方法类似。

var range = document.getElementById("myTextArea").createTextRange();
range.moveEnd("character", 3); // 将文本范围向后移动3个字符

示例

示例1：截取文本框中选中的文本

在文本框中选中一段文本，点击按钮后将所选文本截取下来。

<textarea id="myTextArea"></textarea>
<button onclick="getSelection()">获取选中文本</button>

function getSelection() {
  var range = document.getElementById("myTextArea").createTextRange();
  range.select();
  var selectionText = range.text;
  alert("选中的文本为：" + selectionText);
}

示例2：给文本框中所选文本添加超链接

在文本框中选中一段文本，点击按钮后给该文本添加超链接。

<textarea id="myTextArea"></textarea>
<button onclick="addLink()">添加超链接</button>

function addLink() {
  var range = document.getElementById("myTextArea").createTextRange();
  range.select();
  var linkUrl = prompt("请输入链接地址：", "http://");
  range.execCommand("CreateLink", false, linkUrl);
}

以上就是对textRange对象使用方法的一些总结和示例，希望能够帮助到大家。