TextRange | Web API

在此页

特性
方法
范例
注意事项
浏览器兼容性
另请参阅
相关话题

非标
此特征是非标准的，且不在标准轨道中。不要在面向 Web 的生产站点中使用它：它不适用于每个用户。实现之间可能存在大的不兼容性，且行为将来可能改变。

IE Only

This property is IE specific. Although it is well supported by IE, most other browsers no longer support this property. This property should only be used as one of the solutions when you need to be compatible with lower versions of IE, rather than relying on it completely in cross browser scripts.

A TextRange object represents a fragment of text in a document, similar to the standard defined 范围 接口。

This object is used to represent a specific piece of text in the document. For example, when you hold down the mouse to select the content on the page, you create a typical TextRange . It is implemented in IE, then a TextRange object can be created by Element.createTextRange() or Document.selection.createRange() .

Note that this interface is not supported in non IE browsers. Alternative Selection and 范围 interfaces can be used.

特性

TextRange.boundingHeight 只读
TextRange.boundingLeft 只读: Returns the distance between the left edge of the rectangle that binds the TextRange object and the left edge that completely contains the TextRange 对象。
TextRange.boundingTop 只读: Returns the distance between the top edge of the rectangle that binds the TextRange object and the top edge that completely contains the TextRange 对象。
TextRange.boundingWidth 只读
TextRange.htmlText: Gets or sets the HTML content within the TextRange .
TextRange.text: Gets or sets the plaintext content within the TextRange .

方法

TextRange.collapse()
TextRange.duplicate()
TextRange.execCommand(): Executes a command on the current document, the current selection, or the given scope.
TextRange.expand(): Expand the range to include the full range of specified units. For example, expanding a "word" means that the words at both ends of the range will completely included in the range. xpand to wor may become expand to words ，等。
TextRange.findText()
TextRange.inRange()
TextRange.isEqual()
TextRange.move(): Collapses the range and moves the blank range by a specified number of units. Such as, move("character",-1) means to move one character to the left.
TextRange.moveEnd()
TextRange.moveStart()
TextRange.moveToElementText(): Causes the range to contain the text of the specified element. Can only be used on 元素 对象。
TextRange.parentElement()
TextRange.pasteHTML()
TextRange.queryCommandEnabled(): 返回 布尔 indicating whether the specified command can be executed successfully with the execCommand method in the current state of the given document. You can also see Document.queryCommandEnabled() .
TextRange.queryCommandState(): 返回 布尔 indicating the current state of the specified command. You can also see Document.queryCommandState() .
TextRange.queryCommandValue(): 返回 DOMString indicating the current value of the specified command. You can also see Document.queryCommandValue() .
TextRange.scrollIntoView(): Scroll the range to the visible range (top or bottom). It can be used as an alternative to Element.scrollIntoView in the lower version of IE.
TextRange.select()
TextRange.setEndPoint(): Sets the end point of the current range based on the bounds of other TextRange .

范例

The following example is valid under IE9. The example gets the TextRange 透过 document.selection , and sets the specified element to be selected. IE9 supports the standard alternative 范围 .

var range = document.selection.createRange();
var element = document.getElementById("test");
range.moveToElementText(element);
range.select();
// Selected "SomeTextToBeSelected"

<!DOCTYPE html>
<html>
<head>
  <title>TextRange Example</title>
</head>
<body>
  <p id="test">SomeTextToBeSelected</p>
</body>
</html>

注意事项

Use TextRange to Operate the Selection

Valid only under IE9 。 selection interface should be used first, if the browser allows it.

document.selection property returns a non-standard selection object, and the selection.createRange() method creates a TextRange object consistent with the currently selection.

var sel = document.selection;
var range = sel.createRange();
alert(range.text);
// Output plaintext of the selection

注意， createRange method does not create a reference. If you want to select the modified range after modifying the selection, you need to call the TextRange.select 方法。

`selection` 兼容性

document.selection object is the primary purpose of TextRange . This object is used to process the selected ranges in the document, and is mainly implemented by using the TextRange interface. According to the standard, a window / document may have multiple non adjacent selection, but only Firefox can select multiple ranges through Ctrl ; generally, only one selected TextRange is allowed in ie.

However, in other browsers, document does not have a so-called selection attribute - they operate on the selection through the standard 选定 API , that is, they get the Selection object through the window.getselection() method, and use the standard 范围 object to process the text fragment. IE9 and later also gave up the document.selection object and switched to the standard interface (although TextRange has been reserved, it has lost its function in most cases).

It's easy to get confused. Generally, if the script only needs to be compatible with the latest browser, the standard interface is the best choice; however, the current website still wants to be compatible with IE8 or below browsers. Therefore, the best way is to deal with both at the same time, that is, try to use TextRange mode when the standard interface is not supported, but do not regard it as the only choice.

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

	IE	Other Browsers
`TextRange`	≤8(Standard API after IE9)	No Support（See 选定 API ）

另请参阅

Selection and 范围 standard interface
选定 API to replace this non-standard interface

元数据

最后修改： Feb 25, 2020

在此页

特性

方法

范例

注意事项

Use TextRange to Operate the Selection

selection 兼容性

浏览器兼容性

另请参阅

相关话题

`selection` 兼容性